参见英文答案 >
Semi-transparent color layer over background-image?10个
> Multiple CSS backgrounds,colour over image,ignored6个
我在SO和网络上都看到了很多这个问题.但它们都不是我想要的.
> Multiple CSS backgrounds,colour over image,ignored6个
我在SO和网络上都看到了很多这个问题.但它们都不是我想要的.
如何仅使用CSS为背景图像添加颜色叠加？
示例HTML：
<div class="testclass"> </div>
示例CSS：
.testclass {
background-image: url("../img/img.jpg");
}
请注意：
>我想通过仅使用CSS来解决这个问题.即我不想在div“testclass”中为颜色叠加添加一个子div.
>这不应该是“悬停效果”我只想在背景图像中添加颜色过度.
>我希望能够使用不透明度,即我正在寻找一种允许RGBA颜色的解决方案.
>我正在寻找一种颜色,让我们说黑色.不是渐变.
这可能吗？ (如果没有,我会感到惊讶,但我还没有找到任何关于此的内容),如果是这样,最好的方法是什么呢？
所有建议和建议表示赞赏！
解决方法
我看到2个简单的选择：
>多个背景,在图像上具有半透明单梯度
> hudge inset shadow
渐变选项：
html {
min-height:100%;
background:linear-gradient(0deg,rgba(255,150,0.3),0.3)),url(http://lorempixel.com/800/600/nature/2);
background-size:cover;
}
阴影选项：
html {
min-height:100%;
background:url(http://lorempixel.com/800/600/nature/2);
background-size:cover;
Box-shadow:inset 0 0 0 2000px rgba(255,0.3);
}
我的一个老codepen,几乎没有例子
