css技巧颜色鲜艳的图片可以模糊成黑白效果



<div class="banner noGreyscale topBackground">
  <div class="backgroundImg" style="background-image: url('https://www.elcomcms.com/Images/UserUploadedImages/32072/Why-Intranets-are-Key-to-Improving-Workplace-Collaboration.jpg');"></div>
</div>


CSS滤镜(filter)属提供的图形特效,像模糊,锐化或元素变色过滤器通常被用于调整图片,背景和边界的渲染。


采用filter中的两个属性来达到饱和色彩变为灰色contrastgrayscale 兼容性可以在加上浏览器前缀



.banner .backgroundImg {
  height: 100%;
  max-height: 370px;
  text-align: center;
  color: #fff;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  margin: 0;
  overflow: hidden;
  text-shadow: 10px 10px 100px #000;
  -webkit-filter: contrast(120%);
  -moz-filter: contrast(120%);
  -o-filter: contrast(120%);
  -ms-filter: contrast(120%);
  filter: contrast(120%);
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  filter: grayscale(100%);
  position: absolute;
  z-index: 2;
  width: 100%;
  opacity: .8
}



然后在鲜艳图片上盖一层灰度的图片1px的或者用透明度来处理

.banner {
  position: relative;
  height: 450px;
  overflow: hidden;
  margin: 0 0 30px;
  background: url('https://www.elcomcms.com/images/UserUploadedImages/32115/bg-banner-darken.jpg') 0 0 repeat-x;
}



css技巧颜色鲜艳的图片可以模糊成黑白效果


现在最后的结果!