css中怎么把照片调为灰度

html-css016

css中怎么把照片调为灰度,第1张

Css中将图片调为灰色，是利用滤镜的效果进行渲染的

不同的浏览器需要不同的前缀进行支持。

具体将图片调整为灰色的代码如下

img { 

      filter: grayscale(100%)  //默认

      -webkit-filter: grayscale(100%)  //谷歌浏览器

      -moz-filter: grayscale(100%)  //火狐浏览器

      -ms-filter: grayscale(100%)  //IE核心浏览器

      -o-filter: grayscale(100%)   //Oprea浏览器

      -webkit-transition:all 1s ease-in-out  //这是设置过渡时间效果，有一个缓冲时间

      -o-transition:all 1s ease-in-out

      -moz-transition:all 1s ease-in-out

      -ms-transition:all 1s ease-in-out

}

若需要调整为彩色

img：hover{ 

      filter: grayscale(0%)  //默认

      -webkit-filter: grayscale(0%)  //谷歌浏览器

      -moz-filter: grayscale(0%)  //火狐浏览器

      -ms-filter: grayscale(0%)  //IE核心浏览器

      -o-filter: grayscale(0%)   //Oprea浏览器

      -webkit-transition:all 1s ease-in  //这是设置过渡时间效果，有一个缓冲时间

      -o-transition:all 1s ease-in

      -moz-transition:all 1s ease-in

      -ms-transition:all 1s ease-in

}

首先你要确定，你的灰色背景不是图片自带的。

在这个前提下，你可以通过浏览器（在浏览器页面按F12，然后点击灰色背景）找到这个灰色背景的标签。然后你会看到background：#xxxxxx这个样式。然后你看下，这个样式右上角会有个名称和数字，分别代表这个样式在什么样式表和第几行。然后你找到这个位置，把这个样式改成bakground:none；或者你需要的颜色就可以了