这篇“如何使用css样式把图片改为灰色”文章,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要参考一下,对于“如何使用css样式把图片改为灰色”,小编整理了以下知识点,请大家跟着小编的步伐一步一步的慢慢理解,接下来就让我们进入主题吧。
在css中,可以利用filter属性来把图片改为灰色,该属性可以给图片添加滤镜效果,只需要给图片元素添加“filter: grayscale(灰度数值%);”样式即可将图片设置为灰色。
本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。
在css中,可以利用filter属性来把图片改为灰色。
filter 属性定义了元素(通常是<img>)的可视效果,即给图片添加滤镜效果,例如:模糊与饱和度。
当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> <img src="img/1.jpg" width="200"> <img class="img1" src="img/1.jpg" width="200"> <img class="img2" src="img/1.jpg" width="200"> <img class="img3" src="img/1.jpg" width="200"> </body> </html>
1.行内样式,最直接最简单的一种,直接对HTML标签使用style=""。2.内嵌样式,就是将CSS代码写在之间,并且用
进行声明。3.外部样式,其中链接样式是使用频率最高,最实用的样式,只需要在之间加上
就可以了。其次就是导入样式,导入样式和链接样式比较相似,采用@import样式导入CSS样式表,不建议使用。以上是“如何使用css样式把图片改为灰色”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注亿速云行业资讯频道!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。