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 image overlay with color and transparency）

Answer 2

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

＆＃13;

		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%); }

＆＃13;

<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" />

＆＃13;

Answer 3

使用两个图像将为您提供更多关于可能的效果，过渡等的灵活性。

我用这个：

＆＃13;

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

＆＃13;

<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" />

＆＃13;

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>

html - 灰度+颜色叠加

4 个答案: