Question

我正在开发this网站，我遇到了背景图片问题。当我在Google上搜索时，我知道我可以这样做：

.tinted-image {
    background: 
        linear-gradient(rgba(255, 0, 0, 0.45)),
        url(image.jpg);
}

但不知怎的，我不能这样做：

.tinted-image { //Defining color and image differently
    background: 
        linear-gradient(rgba(255, 0, 0, 0.45)),
    background:
        url(image.jpg);
}

由于我的程序，我无法使用第一个代码，我必须以不同的方式定义背景颜色和图像（悬停和填充）。有没有办法第二种方式呢？或者我可以通过Javascript实现这一目标吗？

Answer 1

第二个背景声明将覆盖第一个。您正在寻找的是背景图像和背景颜色。

Answer 2

.tinted-image {
    background: 
        linear-gradient(rgba(255, 0, 0, 0.45)),
        url(image.jpg);
}

完全有效，只是缺少一些浏览器兼容性回退。如果你只希望它能够＆＃34; tint＆＃34;鼠标悬停;这只是一个alpha混合叠加而不是实际的色调，只需为它创建一个：hover伪。

.tinted-image {
    background: 
        url(image.jpg);
}
.tinted-image:hover {
    background:
        linear-gradient(rgba(255, 0, 0, 0.45)),
        url(image.jpg);
}

另一个完全可以接受的方法是使用嵌套的div来创建叠加效果

<div class="imgDiv">
  <div class="overlayDiv"/>
</div>

-

.imgDiv {
    background: 
        url(image.jpg);
}
.overlayDiv:hover {
    background:
        linear-gradient(rgba(255, 0, 0, 0.45));
}

在Div中应用背景图像的颜色

2 个答案: