suchen

Heim  >  Artikel  >  Web-Frontend  >  Beispiel für die Umwandlung eines Bildes in den Graumodus mithilfe von CSS3

Beispiel für die Umwandlung eines Bildes in den Graumodus mithilfe von CSS3

高洛峰
高洛峰Original
2017-03-02 15:41:412002Durchsuche

In diesem Artikel erfahren Sie, wie Sie mit CSS3 Bilder in den Graumodus umwandeln. Die Implementierung ist sehr einfach und Freunde in Not können darauf zurückgreifen.

Beispielcode:

Der Code lautet wie folgt:

<!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>

Zusammenfassung
Das ist alles dafür Ich hoffe, dass Ihnen der Inhalt gefällt. Vielen Dank für Ihre Unterstützung der chinesischen PHP-Website.

Weitere verwandte Artikel zu Beispielen dafür, wie CSS3 Bilder in den Graumodus umwandelt, finden Sie auf der chinesischen PHP-Website!


Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Bewegen Sie die Maus über die CSS3-Taste, um einen Blendeneffekt zu erzielenNächster Artikel：Bewegen Sie die Maus über die CSS3-Taste, um einen Blendeneffekt zu erzielen

In Verbindung stehende Artikel

Mehr sehen