-
Notifications
You must be signed in to change notification settings - Fork 1
/
img-grayscale.html
24 lines (24 loc) · 999 Bytes
/
img-grayscale.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!doctype html>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<html>
<head>
<title>IMG test</title>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0" version="1.1" color-interpolation-filters="sRGB" id="svgDoc">
<defs>
<filter id="f1">
<feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0"/>
</filter>
</defs>
</svg>
<p>SVG filter, CPU</p>
<img src="IMG_0854_SMALL.JPG" style="-webkit-filter: url(#f1); filter: url(#f1);"></img>
<p>SVG filter, GPU</p>
<img src="IMG_0854_SMALL.JPG" style="-webkit-filter: url(#f1); filter: url(#f1); -webkit-transform: translateZ(0);"></img>
<p>CSS filter, CPU</p>
<img src="IMG_0854_SMALL.JPG" style="-webkit-filter: grayscale(100%); filter: grayscale(100%);"></img>
<p>CSS filter, GPU</p>
<img src="IMG_0854_SMALL.JPG" style="-webkit-filter: grayscale(100%); filter: grayscale(100%); -webkit-transform: translateZ(0);"></img>
</body>
</html>