参见英文答案 > Semi-transparent color layer over background-image?10个 > Multiple CSS backgrounds,colour
...参见英文答案 > Semi-transparent color layer over background-image?10个
> 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,几乎没有例子
. ..