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

您可以将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 2

您可以使用此 :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 3

这应该是诀窍:)。

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

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

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

背景图像用页脚背景颜色覆盖

5 个答案: