CSS灰度滤镜+彩色渐变

Question

我正试图用纯CSS创建一个效果，其中：

1. 彩色背景图像是灰度级的，并对其应用梯度；和

2. 悬停时，渐变逐渐消失，颜色逐渐消失。

下面，我尝试了两种技术，每种技术似乎都能解决一半的问题。后备方案是制作图像的彩色和灰度版本，但显然我想避免这种情况，以最大限度地减少加载时间。我很感激你们的想法——我有点不知所措。

谢谢！

技术1：渐变加背景混合模式

在这里，我已经将梯度直接应用于背景图像，并且通过白色背景和背景混合模式属性的组合来实现灰度效果。

这会导致整体图像变暗，但这没关系——更大的问题是过渡似乎不起作用，因此图像会立即从一种模式跳到另一种模式，而不是通过缓慢的渐变。

https://jsfiddle.net/Lparts4j/1/

HTML:

<div class="test"></div>

CSS：

.test {
width: 400px;
height: 400px;
background: linear-gradient(135deg, rgb(0, 47, 75) 0%, rgb(220, 66, 37) 80%), url("http://i.imgur.com/ulb7EVg.jpg");
background-color: white;
background-blend-mode: multiply, luminosity;
background-size: cover;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
transition: all .5s ease-in-out; }
.test:hover {
background: url("http://i.imgur.com/ulb7EVg.jpg");
background-color: white;
background-blend-mode: normal;
background-size: cover; }

技术2：元素前的灰度滤波器加梯度

在这里，我使用了一个：before元素来应用渐变，并使用filter属性来实现灰度效果。

渐变使用这种方法。然而，我无法将渐变与灰度相结合——灰度过滤器最终也应用于：before元素，这样渐变就会失去所有颜色。

在jsfiddle中，左图像同时具有梯度和灰度滤波器，而右图像仅具有梯度。

https://jsfiddle.net/548afgjf/4/

HTML:

<div class="img img-one"></div>
<div class="img img-two"></div>

CSS：

.img {
position: relative;
display: inline-block;
width: 300px;
height: 400px; }
.img-one {
background: url('http://i.imgur.com/ulb7EVg.jpg') center center / cover no-repeat;
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}
.img-one:before {
content:'';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: .6;
background: rgb(0, 47, 75);
background: -moz-linear-gradient(-45deg, rgb(0, 47, 75) 0%, rgb(220, 66, 37) 100%);
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, rgb(0, 47, 75)), color-stop(100%, rgb(220, 66, 37)));
background: -webkit-linear-gradient(-45deg, rgb(0, 47, 75) 0%, rgb(220, 66, 37) 100%);
background: -o-linear-gradient(-45deg, rgb(0, 47, 75) 0%, rgb(220, 66, 37) 100%);
background: -ms-linear-gradient(-45deg, rgb(0, 47, 75) 0%, rgb(220, 66, 37) 100%);
background: linear-gradient(135deg, rgb(0, 47, 75) 0%, rgb(220, 66, 37) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#002f4b', endColorstr='#dc4225', GradientType=1);
-webkit-transition: opacity .6s ease-in-out;
-moz-transition: opacity .6s ease-in-out;
-o-transition: opacity .6s ease-in-out;
transition: opacity .6s ease-in-out;
}
.img-one:hover {
-webkit-filter: grayscale(0%);
filter: grayscale(0%);
}
.img-one:hover:before {
opacity: 0; }
.img-two {
background: url('http://i.imgur.com/ulb7EVg.jpg') center center / cover no-repeat;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}
.img-two:before {
content:'';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: .6;
background: rgb(0, 47, 75);
background: -moz-linear-gradient(-45deg, rgb(0, 47, 75) 0%, rgb(220, 66, 37) 100%);
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, rgb(0, 47, 75)), color-stop(100%, rgb(220, 66, 37)));
background: -webkit-linear-gradient(-45deg, rgb(0, 47, 75) 0%, rgb(220, 66, 37) 100%);
background: -o-linear-gradient(-45deg, rgb(0, 47, 75) 0%, rgb(220, 66, 37) 100%);
background: -ms-linear-gradient(-45deg, rgb(0, 47, 75) 0%, rgb(220, 66, 37) 100%);
background: linear-gradient(135deg, rgb(0, 47, 75) 0%, rgb(220, 66, 37) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#002f4b', endColorstr='#dc4225', GradientType=1);
-webkit-transition: opacity .6s ease-in-out;
-moz-transition: opacity .6s ease-in-out;
-o-transition: opacity .6s ease-in-out;
transition: opacity .6s ease-in-out;
}
.img-two:hover {
}
.img-two:hover:before {
opacity: 0; }

Answer 1

我过去曾尝试过灰度效果，让它在所有浏览器中工作的唯一方法是将图像包装在SVG元素中，并将SVG过滤器应用于该元素。你可能需要做同样的事情才能工作。

在你的页面上，你需要定义SVG过滤器(这只是灰度…你需要研究如何着色…)

<svg>
<defs>
<filter id="greyscale">
<feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0
0.3333 0.3333 0.3333 0 0
0.3333 0.3333 0.3333 0 0
0 0 0 1 0" />
</filter>
</defs>
</svg>

接下来将您的图像包装在SVG元素中：

<svg class="filterThis" width="100px" height="100px">
<image class="svgImg" xlink:href="image.png" height="100px" width="100px" />
</svg>

并在CSS中应用过滤器：

svg.filterThis .svgImg {
filter: url(#greyscale);
}