Die opacity-Eigenschaft bestimmt die Deckkraft/Transparenz eines Elementes.
Die opacity-Eigenschaft kann einen Wert zwischen 0 und 1.0 aufweisen. Je niedriger der Wert um so mehr Transparenz:
<!DOCTYPE html>
<html>
<head>
<style>
figure {
display: inline-block;
width: 125px;
height: 165px;
}
figcaption {
text-align: center;
}
@media screen and (max-width: 668px){
figure {
display: block;
margin: 0 auto;
}
}
</style>
</head>
<body>
<h2>Bilder Deckkraft/Transparenz</h2>
<p>Die opacity-Eigenschaft kann einen Wert zwischen 0 und 1.0 aufweisen. Je niedriger der Wert um so mehr Transparenz:</p>
<p>Bild mit unterschiedlicher Deckkraft(opacity):</p>
In diesem Beispiel wird ersichtlich was passieren soll wenn ein User mit der Maus über das Bild bewegt.
In diesem Fall soll das Bild eine Transparenz(opacity) von 0.5 generieren beim hovern.
<!DOCTYPE html>
<html>
<head>
<style>
img.PictureLogo12 {
width: 100px;
height: 100px;
}
img.PictureLogo12:hover {
opacity: 0.5;
}
</style>
</head>
<body>
<h2>Bilder(Image)-Transparenz</h2>
<p>Die Deckkraft(opacity) Eigenschaft wird oft verwendet zusammen mit dem :hover Selektor um die Deckkraft zu verändern wenn man mit der Maus darüber bewegt:</p>
Wenn wir verwenden die opacity Eigenschaft um den Hintergrund eines Elementes mit Transparenz zu versehen,
alle die Kinder-Elemente werden auch transparent.
Der Text innerhalb eines Elementes mit niedriger Deckkraft werden schwer lesbar:
<!DOCTYPE html>
<html>
<head>
<style>
div.default {
background-color: grey;
padding: 10px;
}
div.first {
background-color: grey;
opacity: 0.2;
padding: 10px;
}
div.second {
background-color: grey;
opacity: 0.3;
padding: 10px;
}
div.third {
background-color: grey;
opacity: 0.6;
padding: 10px;
}
</style>
</head>
<body>
<h2>Transparente Boxen</h2>
<p>Wenn wir verwenden die opacity Eigenschaft um den Hintergrund eines Elementes mit Transparenz zu versehen, alle die Kinder-Elemente werden auch transparent.
Der Text innerhalb eines Elementes mit niedriger Deckkraft werden schwer lesbar:</p>
Als erstes erstellen wir ein <div> Element (class="background") mit einem Hintergrundbild und einem Rahmen.
Dann erstellen wir ein weiteres <div> (class="transbox") innerhalb des ersten <div>.
Das <div class="transbox"> hat eine Hintergrund-Farbe und einen Rahmen. Das <div> ist transparent.
Innerhalb des transparenten <div> fügen wir in einem <p> Element Text ein.
<!DOCTYPE html>
<html>
<head>
<style>
div.background {
background: url(Bilder/Logo12.png) repeat;
border: 2px solid black;
}
div.transbox {
margin: 30px;
background-color: white;
border: 1px solid black;
opacity: 0.6;
}
div.transbox p {
margin: 5%;
font-weight: bold;
color: black;
}
</style>
</head>
<body>
<div class="background">
<div class="transbox">
<p>Dies ist Text platziert in einer transparenten Box.</p>
</div>
</div>
</body>
</html>
Man kann einen RGB Farbe-Wert verwenden mit einem Alpha-Kanal (RGBA).
Ein RGBA Farbe-Wert mit: rgba(rot, grün, blau, alpha).
Das alpha-Parameter ist ein Wert zwischen 0.0 (Transparent) and 1.0 (volle Deckkraft).
