灰度+颜色叠加

Question

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

问题是，只有一个简单的蓝色叠加层，它只是在彩色图像上放一个半透明的蓝色块......这意味着其他颜色正在显示一点。我想要的是图像只是蓝色的阴影。

现在，我已经设法让

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

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

Answer 1

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

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

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

我认为您想做的事情的演示：http://jsbin.com/igahay/3011/（来自本主题：带有颜色和透明度的CSS图像叠加）

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>