css 图片变黑白效果 使用CSS将图片转换成黑白的 兼容方法

html-css019

css 图片变黑白效果 使用CSS将图片转换成黑白的 兼容方法,第1张

直接将其放入页面中的<style></style>即可,或者外部样式直接在内部引用。

html,body { 

-webkit-filter: grayscale(100%) 

-moz-filter: grayscale(100%) 

-ms-filter: grayscale(100%) 

-o-filter: grayscale(100%) 

filter: grayscale(100%) 

filter: gray 

}

css可以通过perspective属性来实现。ps可以直接通过滤镜中的翻转效果实现。

对于ps,首先打开Photoshop,导入需要编辑的图片,用选取工具选定图片,在工具栏中打开滤镜效果,选择反转效果即可。对于css,css实现翻转效果的方法,首先创建一个演示方块,并为其添加transition和transform属性,然后将transition属性添加到需要翻转的p上,最后添加perspective和transform-style属性即可。

在网页的<head></head>之间加入以下代码,调整网页的灰度等级…

body{FILTER: progid:DXImageTransform.Microsoft.BasicImage(grayScale :1)}

img{FILTER: progid:DXImageTransform.Microsoft.BasicImage(grayScale :1)}

div {filter: progid:dximagetransform.microsoft.basicimage(grayscale :1)}

object {filter: progid:dximagetransform.microsoft.basicimage(grayscale :1)}

select {filter: progid:dximagetransform.microsoft.basicimage(grayscale :1)}

embed {filter: progid:dximagetransform.microsoft.basicimage(grayscale :1)}

或者加入以下代码到网站 css里

html { filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)}