How to Darken a Background Using CSS

 body{
 background:
        /* top, transparent black, faked with gradient */ 
        linear-gradient(
          rgba(0, 0, 0, 0.7), 
          rgba(0, 0, 0, 0.7)
        ),
        /* bottom, image */
        url(https://images.unsplash.com/photo-1614030424754-24d0eebd46b2);
    }

Darken css image background

The solution.

background-image: url('/assets/images/new-offers-item-favourite.3c611ec2.svg');
background-color: rgba(0, 0, 0, 0.5);

The credit goes to @misorude.

How to darken a CSS background image?

#home {
   background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ), url('file:///Volumes/Animus/Jon/Dropbox/website/hellcity.jpg');
  -webkit-background-size: cover;
  -moz-background-size:  cover;
  -o-background-size: cover;
  background-size: cover;
}

This should work

How to darken the background image in CSS?

try something like this:

In your jumbotron class, give it a little more CSS by adding position:relative; to it if it's not already there. That will allow the next step to be positioned inside of that box.

Then, add an :after pseudo element. with the following CSS

.jumbotron:after {
    content:"";
    display:block;
    width:100%;
    height:100%;
    background-color:rgba(0,0,0,0.5);
    position:absolute;
    top:0;
    left:0;
    z-index:1 /*Added this in the updated */
}

the background-color shade is controlled by the final value. 0.5 is 50% opacity, raise to 1 or lower to 0 to get your desired darkness.

UPDATE What has been pointed out is that anything inside of the box is covered by the new pseudo element. Here's a cheap fix. Add z-index:1; to your :after alement, then add the below

.jumbotron > * {
    position:relative;
    z-index:2;
}

Thanks to cale_b https://jsfiddle.net/e8c3ex0h/3/

Dynamically change color to lighter or darker by percentage CSS

All modern browsers have had 100% filter support since January 2020. Even UC Browser for Android (instead of Chrome, on the $80 phones) supports it.

a {
    /* a nice, modern blue for links */
    color: #118bee;
}
a:active {
    /* Darken on click by 15% (down to 85%) */
    filter: brightness(0.85);
}

Additionally, you can control this dynamically with CSS variables, which have been supported by most browsers since October 2017 (excluding QQ):

:root {
    --color: #118bee;
    --hover-brightness: 1.2;
}
a {
    color: var(--color);
}
a:active {
    /* Darken on click */
    filter: brightness(var(--hover-brightness));
}

Not my project, but one that's great to look at for a real-world example of how great modern CSS can be, check out: MVP.css

Original Answer

If you're using a stack which lets you use Sass or Less, you can use the lighten function:

$linkcolour: #0000FF;

a {
  color: $linkcolour;
}

a.lighter {
  color: lighten($linkcolour, 50%);
}

There's also darken which does the same, but in the opposite direction.

How to darken the lower part of the background image?

You can use a CSS solution, check Transparency Gradient, it works like this :

background:linear-gradient(to bottom, rgba(0,0,0,0) 20%, rgba(0,0,0,1)), url('your_url');

This will darken the bottom of your background-image.

If you do not want to darken the image but the div on top of it then use :

background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 70%); 

on your div (.p-heading).

Darkening a CSS background image

This is how you can darken background image without loosing any effect applied.

   
    .bg{      background: url('http://res.cloudinary.com/wisdomabioye/image/upload/v1462961781/about_vbxvdi.jpg');      height: 500px;      -webkit-background-size: cover;      -moz-background-size:  cover;      -o-background-size: cover;       background-size: cover;    }    .content{      background: rgba(0,0,0,0.4);      color: white;      height: inherit;      padding-left: 10px;    }

<div class='bg'>           <div class='content'>     <p>        Some content Some content Some content Some                content Some content Some Some content Some content Some content Some content Some content Some Some content Some content Some content Some content Some content Some Some content Some content Some content Some content Some content Some Some content Some content Some content Some content Some content Some Some content Some content Some content Some content Some content Some Some content Some content Some content Some content Some content Some Some content Some content Some content Some content Some content Some Some content Some content Some content Some content Some content Some      </p>   </div>  </div>
    

.darken {    position: relative;    width: auto;    height: auto;    margin: 10px;    border-radius: 20px;    border: hidden;    padding: 20%;}

<div class="darken" style="background:    linear-gradient(135deg, rgba(0, 0, 0, 0.8) 40%, rgba(0, 0, 0, 0) 70%) no-repeat center top ,      url(http://lorempixel.com/800/500/nightlife/7) 0 0 /cover ;">test</div>

#landing-wrapper {
    display:table;
    width:100%;
    background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ), url('landingpagepic.jpg');
    background-position:center top;
    height:350px;
}

#landing-wrapper {  display: table;  width: 100%;  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('http://placehold.it/350x150');  background-position: center top;  height: 350px;  color: white;}

<div id="landing-wrapper">Lorem ipsum dolor ismet.</div>