зеркало из https://github.com/mozilla/gecko-dev.git
86 строки
4.1 KiB
HTML
86 строки
4.1 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<style>
|
|
html, body {
|
|
margin: 0;
|
|
}
|
|
img {
|
|
display: block;
|
|
}
|
|
#container {
|
|
margin: 0;
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.rect {
|
|
position: absolute;
|
|
width: 25%;
|
|
height: 25%;
|
|
//background-image: url("color_pattern_1.png");
|
|
}
|
|
.overlay {
|
|
z-index: 1;
|
|
}
|
|
.inner {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-image: url("color_pattern_2.png");
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="container">
|
|
<img src="color_pattern_1.png" class="rect" style="left: 0%; top: 0%;"/>
|
|
<img src="color_pattern_2.png" class="rect" style="left: 0%; top: 0%;" style="mix-blend-mode: normal;"/>
|
|
|
|
<img src="color_pattern_1.png" class="rect" style="left: 25%; top: 0%;"/>
|
|
<img src="color_pattern_2.png" class="rect" style="left: 25%; top: 0%; mix-blend-mode: multiply;"/>
|
|
|
|
<img src="color_pattern_1.png" class="rect" style="left: 50%; top: 0%;"/>
|
|
<img src="color_pattern_2.png" class="rect" style="left: 50%; top: 0%; mix-blend-mode: screen;"/>
|
|
|
|
<img src="color_pattern_1.png" class="rect" style="left: 75%; top: 0%;"/>
|
|
<img src="color_pattern_2.png" class="rect" style="left: 75%; top: 0%; mix-blend-mode: overlay;"/>
|
|
|
|
<img src="color_pattern_1.png" class="rect" style="left: 0%; top: 25%;"/>
|
|
<img src="color_pattern_2.png" class="rect" style="left: 0%; top: 25%; mix-blend-mode: darken;"/>
|
|
|
|
<img src="color_pattern_1.png" class="rect" style="left: 25%; top: 25%;"/>
|
|
<img src="color_pattern_2.png" class="rect" style="left: 25%; top: 25%; mix-blend-mode: lighten;"/>
|
|
|
|
<img src="color_pattern_1.png" class="rect" style="left: 50%; top: 25%;"/>
|
|
<img src="color_pattern_2.png" class="rect" style="left: 50%; top: 25%; mix-blend-mode: color-dodge;"/>
|
|
|
|
<img src="color_pattern_1.png" class="rect" style="left: 75%; top: 25%;"/>
|
|
<img src="color_pattern_2.png" class="rect" style="left: 75%; top: 25%; mix-blend-mode: color-burn;"/>
|
|
|
|
<img src="color_pattern_1.png" class="rect" style="left: 0%; top: 50%;"/>
|
|
<img src="color_pattern_2.png" class="rect" style="left: 0%; top: 50%; mix-blend-mode: hard-light;"/>
|
|
|
|
<img src="color_pattern_1.png" class="rect" style="left: 25%; top: 50%;"/>
|
|
<img src="color_pattern_2.png" class="rect" style="left: 25%; top: 50%; mix-blend-mode: soft-light;"/>
|
|
|
|
<img src="color_pattern_1.png" class="rect" style="left: 50%; top: 50%;"/>
|
|
<img src="color_pattern_2.png" class="rect" style="left: 50%; top: 50%; mix-blend-mode: difference;"/>
|
|
|
|
<img src="color_pattern_1.png" class="rect" style="left: 75%; top: 50%;"/>
|
|
<img src="color_pattern_2.png" class="rect" style="left: 75%; top: 50%; mix-blend-mode: exclusion;"/>
|
|
|
|
<img src="color_pattern_1.png" class="rect" style="left: 0%; top: 75%;"/>
|
|
<img src="color_pattern_2.png" class="rect" style="left: 0%; top: 75%; mix-blend-mode: hue;"/>
|
|
|
|
<img src="color_pattern_1.png" class="rect" style="left: 25%; top: 75%;"/>
|
|
<img src="color_pattern_2.png" class="rect" style="left: 25%; top: 75%; mix-blend-mode: saturation;"/>
|
|
|
|
<img src="color_pattern_1.png" class="rect" style="left: 50%; top: 75%;"/>
|
|
<img src="color_pattern_2.png" class="rect" style="left: 50%; top: 75%; mix-blend-mode: color;"/>
|
|
|
|
<img src="color_pattern_1.png" class="rect" style="left: 75%; top: 75%;"/>
|
|
<img src="color_pattern_2.png" class="rect" style="left: 75%; top: 75%; mix-blend-mode: luminosity;"/>
|
|
</div>
|
|
</body>
|
|
</html>
|