4-2 视觉效果篇上色

知识储备

1.CSS3 filter
下面的链接上有关于几种常见滤镜的介绍

http://www.hiheng.com/blog/archives/1088

2.mix-blend-mode 混合模式/background-blend-mode
看看张鑫旭的这篇文章

http://www.zhangxinxu.com/wordpress/2015/05/css3-mix-blend-mode-background-blend-mode/

在大致了解需要用到的知识后，我们来给图片上个颜色
个人认为这个功能不太适合做的太花哨，还是喜欢简约风格

小测试

效果：

原图

使用怀旧/饱和度/色相等滤镜

可能大家觉得这个效果并不适合自己的风格，可以尝试改下色相等属性

示例代码

html

<img src="锥头螳螂.jpg">

css

width: 400px;
-webkit-filter: sepia() saturate(1.5) hue-rotate(295deg);
filter: sepia() saturate(1.5) hue-rotate(295deg);

Tips:记得为不同浏览器加上前缀
这个方法的不足之处就是看起来有点褪色，不断调试饱和度也看起来有不同（第一张）

对比（第一张是filter/第二张用了混合模式）

混合模式

1.第一种方法
第一种方法里我们在Image外面套用一层div,目的是为了设置一层背景色
html

<div class="image">   
  <img src="锥头螳螂.jpg">
</div>

css

.image{  
   width: 400px; 
   margin: 0 auto; 

   background: hsl(335, 100%, 10%);
}
.image>img{   
   width: 100%;
   mix-blend-mode: luminosity;
}

在img里我们设置下方的背景或颜色来混合整个元素
mix-blend-mode: luminosity;

2.第二种方法
html

<div style="background-image: url('锥头螳螂.jpg')"></div>

css

.image{
  width: 400px;
  height: 270px;

  margin: 0 auto;
  background-size: cover;
  background-color: hsl(270, 1%, 19%);
  background-blend-mode: luminosity;
  transition: .8s background-color;
}

.image:hover{  
  background-color: transparent;
}

在这里我们将图片放置在了div背景中，导致这个方法的一个不足（必须设置div的大小，因为背景图片无法撑开容器）

关键的一步：设置
background-color: hsl(270, 1%, 19%);
background-blend-mode: luminosity;

到此我们已经完成了上图的效果。作者在这里添加了一些变化，为其设置了hover过渡动画

当我们移到图片上方时，图片将显示其真正的颜色，
从一开始

灰色风格

过渡到

原色

给人视觉上的冲击，效果还是不错的哦

总结：如果在一些用户提示上用到这种效果还是灰常好的！！例如一些不可点击的图片。

最后编辑于：2017.12.03 04:32:09

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

4-2 视觉效果篇上色