Home / Questions / 29189
Accepted
Otto
Asked: 2020-10-22 07:41:51 +0800 CST 2020-10-22 07:41:51 +0800 CST

How to apply a transparent dark layer to a background image?

  • 772

I'm trying to apply a transparent black color to a background image to avoid strong or flashy colors.

No need to edit the image with any special program.

I have tried to apply this style:

background-color: rgba(0,0,0,0.8);

But I have not been successful.

How do I get the background image to apply a transparent black color, like a layer.

#image {
  background-color: rgba(0,0,0,0.8);
  background-image:url(http://www.gelfuzion.com/img/slides/nivo/bg-1.jpg);
  height: 500px;
  max-width: 100%;
}
<div id="image"></div>

html5

5 Answers

  1. Best Answer

    One possibility would be to use CSS filters to change the contrast/brightness of the image. If you put a luminosity between 0 and 1 the image will look darker. Something like this example:

    #image {
  background-color: rgba(0,0,0,0.8);
  background-image:url(http://www.gelfuzion.com/img/slides/nivo/bg-1.jpg);
  height: 500px;
  max-width: 100%;
  filter:brightness(0.4);
}
    <div id="image"></div>

    ::beforeAnother option could be to use the o pseudo-elements ::afterto put a semi-transparent layer on top of the image and thereby make it look darker. For example:

    #image {
  background-image:url(http://www.gelfuzion.com/img/slides/nivo/bg-1.jpg);
  height: 500px;
  max-width: 100%;
  position:relative;
  color: white;
  z-index:1;
}

#image::after {
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(0,0,0,0.6);
  z-index:-1;
}
    <div id="image">
  HOLA MUNDO
</div>

    • 14

  2. You can work with filter

    #image {
  background-image:url(http://www.gelfuzion.com/img/slides/nivo/bg-1.jpg);
  height: 500px;
  max-width: 100%;
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}
    <div id="image"></div>

    • 3

  3. You get it with linear-gradient in the background-image:

    #image {

  background-image:linear-gradient(rgba(0,0,0,0.8),rgba(0,0,0,0.8)),url(http://www.gelfuzion.com/img/slides/nivo/bg-1.jpg);
  height: 500px;
  max-width: 100%;
}

    If you don't quite understand it well, you can follow this short youtube tutorial:

    https://www.youtube.com/watch?v=ASgmfNvCQRg

    • 3

  4. You can apply something similar to this:

    <style>
img {
    opacity: 0.5;
    filter: alpha(opacity=50); /* For IE8 and earlier */
}
</style>

<h1>Image Transparency</h1>
<p>The opacity property specifies the transparency of an element. The lower the value, the more transparent:</p>

<p>Image with 50% opacity:</p>
<img src="img_forest.jpg" alt="Forest" width="170" height="100">

    source: http://www.w3schools.com/css/tryit.asp?filename=trycss_image_opacity

    • 2

  5. All the codes presented are used for the subject in question, unfortunately it does not only affect the background image, but also the fonts.

    In my case, I prefer to edit the photo :/ it's more work, but more reliable.

    • 1