Beispiel:Opacity.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

<!DOCTYPE html> <html lang="de"> <head>

 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0" >
 <link rel="stylesheet" media="screen" href="./Beispiel:Grundlayout.css" >
 <title>opacity</title>

<style> main {

 background-color: #8FBC8F;
 background-image:
   repeating-linear-gradient(transparent, transparent 30px, white 30px, white 32px),
   repeating-linear-gradient(to right, transparent, transparent 30px, white 30px, white 32px);
 height: 85vh;

}

     span {
       background: white;
       border: 5px solid;
       cursor: help;
       display: inline-block;
       margin: 1em 2em;
       outline: 5px solid red;
       padding: 1em 2em;
     }
     .o0  { opacity: 0; }
     .o2  { opacity: 0.2; }
     .o4  { opacity: 0.4; }
     .o6  { opacity: 0.6; }
     .o8  { opacity: 0.8; }
     .o10 { opacity: 1; }

</style> </head>

<body>

Durchsichtigkeit mit opacity

<main>

opacity: 0.0 opacity: 0.2 opacity: 0.4 opacity: 0.6 opacity: 0.8 opacity: 1.0

</main> </body> </html>