<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Filter for images</title>
</head>
<body>
<h1>CSS3 filter(滤镜) 属性</h1>
<div>BLUR</div>
<img src="twin.jpg" alt="" style="filter:blur(5px)">
<img src="twin.jpg" alt="" style="filter:blur(2px)">
<img src="twin.jpg" alt="" style="filter:blur(10px)">
<div>GRAYSCALE</div>
<img src="twin.jpg" alt="" style="filter:grayscale(100%)">
<div>BRIGHTNESS</div>
<img src="twin.jpg" alt="" style="filter:brightness(200%)">
<div>CONTRAST</div>
<img src="twin.jpg" alt="" style="filter:contrast(200%)">
<div>INVERT</div>
<img src="twin.jpg" alt="" style="filter:invert(100%)">
<div>OPACITY</div>
<img src="twin.jpg" alt="" style="filter:opacity(40%)">
<img src="twin.jpg" alt="" style="filter:opacity(80%)">
<img src="twin.jpg" alt="" style="filter:opacity(10%)">
</body>
</html>