Question

我正在尝试使用纯CSS创建一个效果：

彩色背景图像是灰度级的，并且应用了渐变色;和
悬停时，渐变淡出，颜色渐渐消失。

下面，我尝试了两种技术，每种技术似乎解决了一半的问题。后备将是制作图像的彩色和灰度版本，但显然我想避免这种情况以最大限度地减少加载时间。非常感谢你们的任何想法 - 我有点难过。

谢谢！

技术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);
}

CSS灰度滤镜+彩色渐变

1 个答案: