单色图像颜色
问题描述:
我有一个图像div作为背景。我希望这个图像是红色和黑色的单色。这可能与CSS(或可能是Javascript)?看过滤器我只能找到一种方式来显示图像在纯黑色和白色。为了澄清,我不想只是一个简单的颜色叠加,图像需要基本上有一个梯度地图应用到它。单色图像颜色
代码:
.top-field {
min-height: 300px;
}
.top-field .bg-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 100;
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
filter: grayscale(100%);
}
<div class="top-field">
<div class="bg-image" style="background-image: url('https://source.unsplash.com/category/nature/1600x900')"></div>
</div>
这是结果,我想:
答
您可以使用CSS线性渐变。但您需要从.bg-image
删除filter
财产。
.top-field {
\t min-height: 300px;
}
.top-field .bg-image {
\t position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 100;
/* -webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
filter: grayscale(100%); */
}
.top-field:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(rgba(255, 0, 0, 0.5), rgba(0, 0, 0, 0.5));
z-index: 999;
}
\t \t \t <div class="top-field">
\t \t \t \t <div class="bg-image" style="background-image: url('https://source.unsplash.com/category/nature/1600x900')"></div>
</div>
希望这有助于!
+0
谢谢!然而,我试图在没有渐变的情况下显示图像。我只是希望它是单色的(而不是黑白色,我希望它是红色和黑色)。这可能吗? – Ellinor
两种颜色或某种颜色过滤器之间的过渡? –
我认为你正在寻找渐变(http://www.w3schools.com/css/css3_gradients.asp) – 0aslam0
[如何在CSS中覆盖图像颜色?](http://*.com/questions/18815157/how-to-overlay-image-with-color-in-css) –