blob: 150ed08b1cd1649d1a6d60416b71ed1affd4168f [file] [log] [blame]
<!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>