在页脚中覆盖有背景颜色的背景图像

Question

Is there any possibility to have background-image overlayed with background-color in footer?

<footer class="layout_footer">
...
</footer>

.layout_footer{
  background-image: url('./../images/footer.jpg');
  background-size: cover;
  background-color: rgba(0,0,0,0.6); 
 }

Answer 1

You can use linear-gradient with your background image. I added height:100px just for demonstration.

Browsers will treat linear-gradient as an image and will stack it with your actual image.

 .layout_footer { background-image: linear-gradient(0deg, rgba(255, 0, 0, 0.6), rgba(255, 0, 0, 0.6)), url('http://placekitten.com.s3.amazonaws.com/homepage-samples/408/287.jpg'); background-size: cover; height: 100px; } 

 <footer class="layout_footer"> ... </footer> 

Answer 2

you can do with this :after css property

 .layout_footer{ background-image: url('https://www.gravatar.com/avatar/b962594a4e8d0aa2219d0b5e15f72c39?s=32&d=identicon&r=PG&f=1'); background-size: cover; position:relative; height:200px; width:200px; } .layout_footer:after { content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0; background-color: rgba(0,0,0,0.6); } 

 <footer class="layout_footer"></footer> 

Answer 3

This should do the trick :).

layout_footer {
    opacity: 0.4;
    background-color: #000000;
    background-image: url('./../images/footer.jpg');
 }

Answer 4

.layout_footer{
  background-blend-mode: overlay;
  background-image: url('./../images/footer.jpg');
  background-size: cover;
  background-color: rgba(0,0,0,0.6);

}

Answer 5

This is from https://css-tricks.com/tinted-images-multiple-backgrounds/

.tinted-image {
  background: 
    /* top, transparent red, faked with gradient */ 
    linear-gradient(
      rgba(255, 0, 0, 0.45), 
      rgba(255, 0, 0, 0.45)
    ),
    /* bottom, image */
    url(image.jpg);
}

Change the color and paths to your choice