css3怎么将彩色图片改为黑白色图片
在css3中，可以利用filter属性来将彩色图片改为黑白色图片，只需要设置该属性的值为“grayscale(%)”即可，具体语法格式“img{filter:grayscale(100%)}”。
本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。
在css3中，可以利用filter属性来将彩色图片改为黑白色图片，只需要设置该属性的值为“grayscale(%)”即可，
filter 属性定义了元素(通常是<img>)的可视效果(例如：模糊、饱和度、灰度)。
grayscale(%) ：将图像转换为灰度图像。值定义转换的比例。值为100%则完全转为灰度图像，值为0%图像无变化。值在0%到100%之间，则是效果的线性乘子。若未设置，值默认是0。
示例：
<!DOCTYPE html>
<html>
<head>
<style>
.img{filter:grayscale(100%)}
</style>
</head>
<body>
<img src="img/1.jpg" width="300px" />
<img src="img/1.jpg" width="300px" class="img"/>
</body>
</html>
效果图：
（学习视频分享：css视频教程）
以上就是css3怎么将彩色图片改为黑白色图片的详细内容！
相关内容
-
为什么grid-gap会导致溢出？
您有一个3列网格容器(.body):grid-template-columns:25%50%25%这些列的总宽度为100%。然后在列（和行）之间添加沟槽：grid-gap:10...
-
css3给背景图层加颜色遮罩的方法
（学习视频分享：css视频教程）在开发中，有时遇到需要给背景层加颜色遮罩的项目，现在特定总结一下给背景图层加颜色遮罩的方法。方法一：通过定位叠加(注意层级)<divcla...
-
使用CSS实现的几种进度条
（学习视频分享：css视频教程）进度条是一个非常常见的功能，实现起来也不难，一般我们都会用div来实现。作为一个这么常见的需求，whatwg肯定是不会没有原生组件提供（虽然有我...
-
CSS3实现文字折纸效果的方法（代码示例）
本篇文章给大家通过示例介绍一下使用CSS3来实现文字折纸效果的方法，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下，希望对大家有所帮助。CSS3文字折纸代码如下，...
-
css3字体可以模糊吗
css3字体的可以模糊的；开发者可以使用CSS3中的filter属性来实现字体模糊效果，filter语法是“filter:blur(px);”，其filter属性定义了元素的可...
-
vs2010 如何支持css3
vs2010支持css3的方法：首先下载CSS3IntellisenseSchema并安装；然后用“Win+R”输入“regedit”打开注册表；接着将css30.xml拷贝到...
-
聊聊你可能不了解的CSS属性函数 attr()
本篇文章带大家了解一下CSS属性函数attr()。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。属性函数attr()用于获取HTML元素里面的属性值,并用于样...
-
浅谈css3 device-width和width之间的差异
本篇文章和大家谈谈css媒体查询中device-width与width的区别。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。【推荐教程：CSS视频教程】1.d...
-
css3怎么设置元素背面不可见
在css3中，可以利用backface-visibility属性，通过给元素添加“backface-visibility:hidden;”样式来设置背面不可见。backface...
-
详细了解CSS3中的border-image-slice属性
【推荐教程：CSS视频教程】首先我们来了解一下它是干嘛的。说明：文档说明：它是控制图像边界向内偏移的。what？？？这是嘛意思啊？根本看不懂！！！好的，我们先不要急，我们在看看...
