在页脚中使用背景色覆盖背景图像

Question

是否有可能在页脚中使用背景颜色叠加背景图像？

<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

这应该可以解决问题:)。

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

Answer 2

您可以将 linear-gradient 与背景图片一起使用。我添加 height:100px 只是为了演示。

浏览器会将 linear-gradient 视为图像，会将其与您的实际图像叠加。

.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 3

你可以这样做 :after css 属性

.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 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

这是来自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);
}

根据您的选择更改颜色和路径

在页脚中使用背景色覆盖背景图像

Background-image overlayed with background-color in footer

html

css

footer