怎么用css样式把图片改为灰色

ID:12914 / 打印
在css中,可以利用filter属性来把图片改为灰色,该属性可以给图片添加滤镜效果,只需要给图片元素添加“filter: grayscale(灰度数值%);”样式即可将图片设置为灰色。

怎么用css样式把图片改为灰色

本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

在css中,可以利用filter属性来把图片改为灰色。

filter 属性定义了元素(通常是怎么用css样式把图片改为灰色)的可视效果,即给图片添加滤镜效果,例如:模糊与饱和度。

当filter 属性的值为grayscale(%),可将图像转换为灰度图像。值定义转换的比例。值为100%则完全转为灰度图像,值为0%图像无变化。值在0%到100%之间,则是效果的线性乘子。若未设置,值默认是0;

立即学习“前端免费学习笔记(深入)”;

示例代码:

<!DOCTYPE html> <html> 	<head> 		<style> 			.img1 { 				-webkit-filter: grayscale(100%); 				/* Chrome, Safari, Opera */ 				filter: grayscale(50%); 			} 			.img2 { 				-webkit-filter: grayscale(100%); 				/* Chrome, Safari, Opera */ 				filter: grayscale(70%); 			} 			.img3 { 				-webkit-filter: grayscale(100%); 				/* Chrome, Safari, Opera */ 				filter: grayscale(100%); 			} 		</style> 	</head> 	<body>  		<p>设置图片的灰度:</p>  		@@##@@ 		@@##@@ 		@@##@@ 		@@##@@ 	</body> </html>

怎么用css样式把图片改为灰色

(学习视频分享:css视频教程)

怎么用css样式把图片改为灰色怎么用css样式把图片改为灰色怎么用css样式把图片改为灰色1.png
上一篇: css怎么实现图片放大缩小动画
下一篇: 总结整理:需要避坑的五大常见css错误(收藏)

作者:admin @ 24资源网   2024-10-18

本站所有软件、源码、文章均有网友提供,如有侵权联系308410122@qq.com

与本文相关文章

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。