82 lines
1.6 KiB
HTML
82 lines
1.6 KiB
HTML
<!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> |