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

html-css020

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)}