CSS 3-webkit-filterフィルタ効果
-webkit-filterは、通常、画像の処理を行う役割を果たします.
原図のスタイル:
Webコード:
<!doctype html>
<html>
<head>
<meta charset='utf-8' />
<title>-webkit-filter</title>
<style type="text/css">
img{-webkit-filter:grayscale(1);}
</style>
</head>
<body>
<img src="3.jpg" alt="" />
</body>
</html>
追加できるコマンドは、次のとおりです.
-webkit-filter:blur(5px); // ， 5
-webkit-filter:sepia(0.5); // ， 0-1， 50%
-webkit-filter:brightness(0.5); // ， 0-1，5 （ 0 ， 1 100% ， ）
-webkit-filter:hue-rotate(30deg); // （ ， ， - - - - - - - - - - ）
-webkit-filter:invert(1); // ， 0-1,0 ，1 ，0.5
-webkit-filter:saturate(4); // ， 0~*,0 ，1 ，
-webkit-filter:contrast(2); // ， 0~*,0 （ ），1 ，
-webkit-filter:opacity(0.8); // ， 0~1,0 ，1
-webkit-filter:drop-shadow(17px 17px 20px black); //