当前第2页 返回上一页
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <!DOCTYPE html>
<html>
<head>
<style>
img {
-webkit-filter: blur(5px); /* Chrome, Safari, Opera */
filter: blur(5px);
}
</style>
</head>
<body>
<p>图片使用高斯模糊效果:</p>
<img src="pineapple.jpg" alt="Pineapple" width="300" height="300">
<p><strong>注意：</strong> Internet Explorer 不支持 filter 属性。</p>
</body>
</html>
|
运行结果：
（学习视频分享：css视频教程）
示例3：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <!DOCTYPE html>
<html>
<head>
<style>
img {
-webkit-filter: drop-shadow(8px 8px 10px red); /* Chrome, Safari, Opera */
filter: drop-shadow(8px 8px 10px red);
}
</style>
</head>
<body>
<p>给图像设置一个阴影效果:</p>
<img src="pineapple.jpg" alt="Pineapple" width="300" height="300">
<p><strong>注意：</strong> Internet Explorer 不支持 filter 属性。</p>
</body>
</html>
|
运行结果：
相关推荐：CSS教程
以上就是css如何设置背景图片灰度的详细内容，更多文章请关注木庄网络博客！
返回前面的内容
相关阅读 >>
html中hr怎么设置粗细
css中有哪些常见的布局方式
css如何隐藏表格
html5、css实现文字阴影效果实例分享
css text-transform属性怎么用
html如何用css美化表格
css怎么清除空白
如何建立纯css的滑块
什么是css样式层叠表
css background-color属性怎么用？
更多相关阅读请进入《css》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者
转载请注明出处：木庄网络博客 » css如何设置背景图片灰度
