| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <style> |
| img { |
| width: 50px; |
| height: 50px; |
| margin: 0; |
| padding: 0; |
| float: left; |
| } |
| .f0 { |
| filter: brightness(0.5); |
| } |
| .f1 { |
| filter: contrast(0.5); |
| } |
| .f2 { |
| filter: saturate(0.5); |
| } |
| .f3 { |
| filter: sepia(0.5); |
| } |
| .f4 { |
| filter: grayscale(0.5); |
| } |
| .f5 { |
| filter: invert(0.5); |
| } |
| .f6 { |
| filter: opacity(0.5); |
| } |
| .f7 { |
| filter: sepia(0.3) brightness(1.2) contrast(0.2); |
| } |
| .f8 { |
| filter: brightness(0.5) sepia(0.3) brightness(1.2) contrast(0.2); |
| } |
| .f9 { |
| filter: contrast(0.5) contrast(1.5); |
| } |
| .f10 { |
| filter: contrast(0.5); |
| } |
| </style> |
| </head> |
| <body> |
| <img class="f0" src="resources/image.svg"> |
| <img class="f1" src="resources/image.svg"> |
| <img class="f2" src="resources/image.svg"> |
| <img class="f3" src="resources/image.svg"> |
| <img class="f4" src="resources/image.svg"> |
| <img class="f5" src="resources/image.svg"> |
| <img class="f6" src="resources/image.svg"> |
| <img class="f7" src="resources/image.svg"> |
| <img class="f8" src="resources/image.svg"> |
| <img class="f9" src="resources/image.svg"> |
| <img class="f10" src="resources/image.svg"> |
| </body> |
| </html> |
