Html 背景图像与页脚中的背景颜色重叠

是否有可能在页脚中用背景色覆盖背景图像

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

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

...
.layout\u页脚{
背景图像：url（'./../images/footer.jpg'）；
背景尺寸：封面；
背景色：rgba（0,0,0,0.6）；
}

这应该可以做到这一点：）

这应该可以做到：）

---

您可以对背景图像使用

线性渐变。我添加了高度：100px

只是为了演示

浏览器会将

线性渐变

视为图像，并将其与实际图像叠加。

.layout\u页脚{
背景图像：线性渐变（0度，rgba（255,0,0,0.6），rgba（255,0,0,0.6）），url（'http://placekitten.com.s3.amazonaws.com/homepage-samples/408/287.jpg');
背景尺寸：封面；
高度：100px；
}

...

您可以对背景图像使用

线性渐变。我添加了高度：100px

只是为了演示

浏览器会将

线性渐变

视为图像，并将其与实际图像叠加。

.layout\u页脚{
背景图像：线性渐变（0度，rgba（255,0,0,0.6），rgba（255,0,0,0.6）），url（'http://placekitten.com.s3.amazonaws.com/homepage-samples/408/287.jpg');
背景尺寸：封面；
高度：100px；
}

...

您可以使用这个css属性

.layout\u页脚{
背景图像：url（'https://www.gravatar.com/avatar/b962594a4e8d0aa2219d0b5e15f72c39?s=32&d=identicon&r=PG&f=1');
背景尺寸：封面；
位置：相对位置；
高度：200px；
宽度：200px；
}
.layout\u页脚：在{
内容：“；
位置：绝对位置；
左：0；
右：0；
排名：0；
底部：0；
背景色：rgba（0,0,0,0.6）；
}

---

您可以使用这个css属性

.layout\u页脚{
背景图像：url（'https://www.gravatar.com/avatar/b962594a4e8d0aa2219d0b5e15f72c39?s=32&d=identicon&r=PG&f=1');
背景尺寸：封面；
位置：相对位置；
高度：200px；
宽度：200px；
}
.layout\u页脚：在{
内容：“；
位置：绝对位置；
左：0；
右：0；
排名：0；
底部：0；
背景色：rgba（0,0,0,0.6）；
}

这是来自

更改您选择的颜色和路径

这是从

---

将颜色和路径更改为您选择的

酷炫解决方案，但不幸的是，ieCool解决方案不支持，但不幸的是，IED不支持。不幸的是，在这种情况下，footer div中的所有元素也变为透明=）谢谢你的回答。不幸的是，在这种情况下，footer div中的所有元素也变为透明=）谢谢你的回答。

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

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

}

.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);
}