CSS3를 사용하여 이미지를 회색 모드로 전환하는 예-CSS 튜토리얼-php.cn

CSS3를 사용하여 이미지를 회색 모드로 전환하는 예

高洛峰

풀어 주다： 2017-03-02 15:41:41

원래의

2045명이 탐색했습니다.

이 기사에서는 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>

로그인 후 복사

요약
위 내용은 전체 내용입니다. 이 기사를 모두가 좋아하길 바라며, PHP 중국어 웹사이트를 지원해 주셔서 감사합니다.

CSS3이 이미지를 회색 모드로 전환하는 예제에 대한 더 많은 관련 기사를 보려면 PHP 중국어 웹사이트에 주목하세요!