Base: Add a test page for CSS opacity property

This commit is contained in:
Egor Ananyin 2021-07-24 09:42:16 +03:00 committed by Ali Mohammad Pur
parent f567414f65
commit 6097578c59
Notes: sideshowbarker 2024-07-18 08:23:43 +09:00
2 changed files with 71 additions and 0 deletions

View file

@ -0,0 +1,70 @@
<html>
<head>
<style>
.op-100 {
background: green;
opacity: 1.0;
}
.op-70 {
background: green;
opacity: 70%;
}
.op-50 {
background: green;
opacity: 0.5;
}
.op-30 {
background: green;
opacity: 30%;
}
.op-0 {
background: green;
opacity: 0;
}
.red {
background: red;
}
</style>
</head>
<body>
<div class=op-100>
100% opacity
</div>
<div class=op-70>
70% opacity
</div>
<div class=op-50>
50% opacity
</div>
<div class=op-30>
30% opacity
</div>
<div class=op-0>
0% opacity
</div>
<div class="red">
Blending with other colors
<div class=op-100>
100% opacity
</div>
<div class=op-70>
70% opacity
</div>
<div class=op-50>
50% opacity
</div>
<div class=op-30>
30% opacity
</div>
<div class=op-0>
0% opacity
</div>
</div>
<div class=op-70>
70% opacity
<div class=op-50>
50% opacity inside 70% opacity
</div>
</div>
</body>
</html>

View file

@ -47,6 +47,7 @@
<p>Some small test pages:</p>
<ul>
<li><a href="calc.html">calc Property</a></li>
<li><a href="opacity.html">CSS opacity property</a></li>
<li><a href="justify-content.html">Flexbox justify-content</a></li>
<li><a href="lists.html">Lists</a></li>
<li><a href="text-decoration.html">Text-decoration</a></li>