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