javascript - Darken an image using CSS - Stack Overflow

admin管理员组

文章数量:1398840

I have this div with an image background:

<div class="image-cover" style={{ backgroundImage: 'url(' + item.image + ')' }}>
      <div className="name">{item.name}</div>
</div>

(the is React code, but essentially the above div has the image applied as a background.)

I want to darken the image, possibly as a gradient so that only the bottom is dark, and fades up to normal. Almost everywhere I searched mentions adding the image as a reference in the CSS. However, in my case, the image url is known only at runtime and is applied in the html.

How can I darken my div here?

I have this div with an image background:

<div class="image-cover" style={{ backgroundImage: 'url(' + item.image + ')' }}>
      <div className="name">{item.name}</div>
</div>

(the is React code, but essentially the above div has the image applied as a background.)

I want to darken the image, possibly as a gradient so that only the bottom is dark, and fades up to normal. Almost everywhere I searched mentions adding the image as a reference in the CSS. However, in my case, the image url is known only at runtime and is applied in the html.

How can I darken my div here?

• javascript
• html
• css

Share Improve this question Follow edited Apr 4, 2017 at 6:31 Mayank Shukla 105k1919 gold badges162162 silver badges145145 bronze badges asked Apr 4, 2017 at 6:12 PrabhuPrabhu 13.4k3434 gold badges133133 silver badges215215 bronze badges 4

• 3 Is drawing a div over the top an option? – texelate Commented Apr 4, 2017 at 6:16
• CSS3 filters are an option, but don't have the option for gradients. If that's what you need, I think @texelate is on the right track. – Alexander Nied Commented Apr 4, 2017 at 6:18
• @texelate sure that's an option... – Prabhu Commented Apr 4, 2017 at 6:23
• Sass is really good for things like this. They have built in functions that can help you darken an image. sass-lang./documentation/Sass/Script/Functions.html – Naomi Commented Apr 4, 2017 at 10:20

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 5

You can simply bine an image and a gradient, like this

div {
  height: 200px;
  width: 500px;
  background-image:
    linear-gradient(black,
                    transparent 20%,
                    transparent 80%,
                    black),
    url(http://lorempixel./500/200/nature/1/);
}

<div></div>

---

Or use a pseudo element, like this

div {
  height: 200px;
  width: 500px;
  background: url(http://lorempixel./500/200/nature/1/);
}
div::after {
  content: '';
  display: block;
  height: 200px;
  width: 500px;
  background: linear-gradient(transparent, black);
}

<div></div>

I was able to achieve that effect by using linear-gradient background on the div's ::before pseudo-element. The idea is to cover the div with its ::before pseudo-element (or with another div, but pseudo-elements don't add any extra elements), and then applying a gradient background to the pseudo-elemetn:

.image-cover {
    position: relative;
}

.image-cover::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* Adjust the color values to achieve desired darkness */
    background: linear-gradient(to top, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.25));
}

Here is a JSFiddle to show it in action.

Inset Box-Shadow

Advantage: slim on code, no additional pseudoelement needed

Disadvantage: Box shadow size and offset values can for current w3 standard be ONLY absolute (not percentual), therefore dynamic/various size of the shadowed element cannot be solved without JavaScript calculating elements dimensions.

There are better answers, so i am just going to throw this as an additional option (worse).

div {
  display: inline-block;
  background:url(http://unsplash.it/200/200);
  width:200px;
  height:200px;      
}

.darkened{
  box-shadow: inset 0 -200px 200px -100px rgba(0,0,0,.9);
}

<div></div>
<div class="darkened"></div>

Elements can have multiple backgrounds, and you want to set it from code?

let imageURL = "https://i.sstatic/QqkeF.png"; // an example image
let cssURL = "url( "  + imageURL + ")"; // convert to CSS url declaration
let gradient = "linear-gradient(to top, rgba(0, 0, 0, 1), rgba(255, 0, 0, 0))";
divElement.style.backgroundImage = gradient + "," + cssURL;

<div id="divElement" style="height:128px; width: 256px;">
    #divElement
</div>

,

Essentially convert the image URL known at run time into a CSS url declaration, create a CSS gradient pattern of your choosing and add them as a ma separated list to the backgroundImage property of the element's style attribute.

I used the global variable divElement for testing - use document.getElementById as you wish.

Edit: looking at your code, it should be fairly easy to put the background image list in the template: the stand-alone code above was written to check it worked :-)

本文标签： javascriptDarken an image using CSSStack Overflow