简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Rumah > hujung hadapan web > tutorial css > teks badan

CSS3把图片变成灰色模式的实例

高洛峰
Lepaskan： 2017-03-02 15:41:41
asal
1960 orang telah melayarinya

这篇文章给大家分享了如何利用CSS3把图片变成灰色模式的效果，实现起来很简单，有需要的朋友们可以参考借鉴。

实例代码：

代码如下:

<!DOCTYPE html>
<html>
<head>
 <meta charset="{CHARSET}">
 <title></title>
 <style type="text/css">
  .gray {
   -webkit-filter: grayscale(100%);
   -moz-filter: grayscale(100%);
   -ms-filter: grayscale(100%);
   -o-filter: grayscale(100%);
   filter: grayscale(100%);
   filter: gray;
  }
  img{width:400px;}
 </style>
</head>
<body>  
 <img class="gray" src="<a href="http://b.hiphotos.baidu.com/zhidao/pic/item/1c950a7b02087bf4fbb05256f0d3572c11dfcf35.jpg">http://www.php.cn/;/a>">
 <img class="gray"  src="<a href="http://c.hiphotos.baidu.com/zhidao/pic/item/03087bf40ad162d9e0c359f214dfa9ec8a13cd2a.jpg">http://www.php.cn/;/a>" />
 <img src="<a href="http://b.hiphotos.baidu.com/zhidao/pic/item/1c950a7b02087bf4fbb05256f0d3572c11dfcf35.jpg">http://www.php.cn/;/a>">
 <img src="<a href="http://c.hiphotos.baidu.com/zhidao/pic/item/03087bf40ad162d9e0c359f214dfa9ec8a13cd2a.jpg">http://www.php.cn/;/a>"  c/>
</body>
</html>
Salin selepas log masuk

总结
以上就是这篇文章的全部内容，希望大家能喜欢，谢谢大家对PHP中文网的支持。

更多CSS3把图片变成灰色模式的实例相关文章请关注PHP中文网！


Label berkaitan：
css3 图片 灰色
sumber：php.cn
Artikel sebelumnya：CSS3按钮鼠标悬浮实现光圈效果 Artikel seterusnya：浅谈css处理水平居中
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Isu terkini
Div dengan potongan separuh bulatan lutsinar Saya mahu membuat bentuk separuh bulatan yang telus menggunakan CSS3 sahaja. Satu-satunya ...
daripada 2023-10-22 17:51:09
0
2
303
Bagaimana untuk membuat bayangan sisipan dalam SVG Saya perlu membuat kotak dengan bayang sebaris, sama seperti CSS3 mempunyai bayangan kotak...
daripada 2023-10-21 15:57:11
0
2
232
Tingkatkan latar belakang kecerunan dengan peralihan CSS3 Saya cuba menggunakan css untuk membuat peralihan pada imej lakaran kenit supaya latar bel...
daripada 2023-10-12 18:05:11
0
2
213
Gunakan peralihan CSS3 dengan latar belakang kecerunan Saya cuba menggunakan css untuk membuat peralihan pada imej lakaran kenit supaya latar bel...
daripada 2023-08-23 21:25:42
0
2
324
Cara menggunakan penapis CSS pada imej latar belakang Saya mempunyai fail JPEG yang saya gunakan sebagai imej latar belakang untuk halaman caria...
daripada 2023-08-23 14:06:46
0
2
189
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina：Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！