css中怎么把照片调为灰度

html-css017

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

}

您是想问css滤镜灰色影响浮动吗？不影响。

acc滤镜将图像中的所有颜色逐渐转换为某种灰色阴影。值为0％对我们的图像没有影响，而值为100％将使它们完全变为灰度。不允许使用负值。

CSS滤镜不是浏览器的插件，也不符合CSS的标准，是微软为了增强浏览器功能而特意开发，并且，整合在IE浏览器中的一类功能的集合。

主要发挥作用的样式

过滤器以下两行：灰色

-webkit的过滤器：灰度（100％）

过滤器的意思过滤器，滤芯：灰色的意思是说一个灰色的滤光页，里面的所有内容的html变成黑色和白色。然而，这种过滤器是无效的chrome和safari浏览器，所以下面会有一排

-webkit的过滤器：灰度（100％）

这种风格是专为使用webkit核心的浏览器，意义和过滤：灰色差不多，只是以不同的方式写什么。

。幻灯片口罩{

过滤：无

不透明度：无

}

几行和页黑白无所谓，它的作用应该是关注的焦点网站过滤器除去。