html - 灰度+彩色叠加

Question

我正在尝试创建一个悬停效果，其中图像开始时是全彩色的，当我将鼠标悬停在图像上时，我希望它有一个蓝色的叠加层。

问题是，只有一个简单的蓝色叠加层，它只是在彩色图像顶部放置一个半透明的蓝色块......这意味着其他颜色会稍微显示出来。我想要的是图像只是蓝色阴影。

现在，我已经设法让图像变为灰度，并且我已经设法获得蓝色叠加层，但是有没有办法让 CSS 堆叠效果？将图像转为灰度，然后在其上叠加颜色。

更简单的方法可能只是将效果创建为光栅图像，然后让它更改图像，但如果可以在代码中完成，那就太好了。

Answer 1

我认为您正在寻找 CSS filter 属性。在此处查看 David Walshe 的演示：http://davidwalsh.name/demo/css-filters.php

目前它是实验性的，我认为只有 Webkit 支持，但它是使用 CSS 实现这一目标的唯一方法。

您还可以查看 Adob​​e CSS 自定义过滤器：http://html.adobe.com/webplatform/graphics/customfilters/cssfilterlab/

我认为你想做的事情的演示：http://jsbin.com/igahay/3011/（来自本主题：CSS image overlay with color and transparency）

Answer 2

单个图像和 css 过滤器（如果您对结果满意）：

		img.front { position: relative; opacity: 0; transition-property: opacity; transition-duration: 0.5s; }
		img.front:hover { opacity: 1; }
		img.back { position: absolute; -webkit-filter: sepia(100%) hue-rotate(180deg) saturate(300%); }

<img class="back" src="https://lh4.googleusercontent.com/-g4UhBKn4KKk/VFzw16RyQQI/AAAAAAAAJ5g/RybFWXp9YXc/w400-h225-no/image-f.jpg" />
<img class="front" src="https://lh4.googleusercontent.com/-g4UhBKn4KKk/VFzw16RyQQI/AAAAAAAAJ5g/RybFWXp9YXc/w400-h225-no/image-f.jpg" />

Answer 3

使用两张图片可以让您在可能的效果、过渡等方面更加灵活。

我会用这个：

img.front { 
  position: relative; 
  opacity: 0; 
  transition-property: opacity; 
  transition-duration: 1s; 
}

img.front:hover { 
  opacity: 1; 
}

img.back { 
  position: absolute; 
}

<img class="back" src="https://lh5.googleusercontent.com/-uM248yE5o9M/VFzw11HH-GI/AAAAAAAAJ5c/KrG1kM7XCsc/w400-h225-no/image-b.jpg" />
<img class="front" src="https://lh4.googleusercontent.com/-g4UhBKn4KKk/VFzw16RyQQI/AAAAAAAAJ5g/RybFWXp9YXc/w400-h225-no/image-f.jpg" />

Answer 4

我确信有更好的方法来解决这个问题，但如果你想在灰度图像上叠加颜色，你可以去饱和背景图像并使用伪元素来创建叠加：

#img1{
  width: 400px;
  height: 200px;  
  background-color: rgba(15,192,252,0.5); 
  background-image: linear-gradient(black, black), url(https://lh4.googleusercontent.com/-g4UhBKn4KKk/VFzw16RyQQI/AAAAAAAAJ5g/RybFWXp9YXc/w400-h225-no/image-f.jpg);
  background-size: 100%;
  background-blend-mode: saturation;
  transition: 0.5s;
}
#img1:before{
  content: "";
  display: block;
  position: absolute;   
  width: inherit;
  height: inherit;
  background-color: inherit;
  opacity: 0.4;  
}
#img1:hover{
  background-color: transparent;
  background-image: url(https://lh4.googleusercontent.com/-g4UhBKn4KKk/VFzw16RyQQI/AAAAAAAAJ5g/RybFWXp9YXc/w400-h225-no/image-f.jpg);
}

<div id="img1">
  <div>