Die Anleitung zu CSS Opacity

View more Tutorials:

Anleitungen CSS

CSS Opacity
RGBA

1- CSS Opacity

CSS Opacity wird verwendet um die Opazität für ein Element festzulegen. Es akzeptiert einen numerischen Wert in Höhe von 0 bis 1. Einige Browser akzeptiert auch einen Prozent-Wert ( % ) aber nicht alles.

CSS {opacity: 1} ist die Default-Opazität eines Element. Dieser Wert erlaubt Sie, das Element deutlich am meisten zu sehen.CSS {opacity:0} wird das Element transparent machen.(transparent).


opacity: <alpha-value>;

/* Example: */

opacity: 1.0;
opacity: 0.5;
opacity: 0;

Die Opazität wirkt sich beim Anwenden auf ein Element mit den allen Inhalt des Element, einschließend die Sub-Elementen. Es gibt keine Erbe von der Opazität und Sie können einen anderen Wert CSS Opacity für das Element einstellen aber das Sub-Element wird noch durch die Opazität des Vater-Element ausgewirkt.

opacity-example.css

#parent  {
   border: 1px solid blue;
   padding: 5px;
   background:lightblue;
}
.child {
   display: inline-block;
   background: lightgreen;
   padding: 5px;
   margin: 10px;
   height: 50px;
   width: 150px;
}
.option {
   border: 1px solid #eee;
   padding: 5px;
   margin: 10px 0px;
}

opacity-example.html

<!DOCTYPE html>
<html>
<head>
    <title>CSS Opacity</title>
    <meta charset="UTF-8"/>

    <link rel="stylesheet" href="opacity-example.css" />
    <script>
        function changeOpa(event)  {
           var opacityValue = event.target.value;
           var parentElement = document.getElementById("parent");

           parentElement.style.opacity = opacityValue;
        }
    </script>
</head>
<body>
    <h3>CSS Opacity</h3>

    <p style="color:blue;">Set Opacity for parent element:</p>
    <div class="option">
        <input type="radio" name="opa" onclick="changeOpa(event)" value="1" checked/> Opacity: 1 <br/>
        <input type="radio" name="opa" onclick="changeOpa(event)" value="0.5"/> Opacity: 0.5 <br/>
        <input type="radio" name="opa" onclick="changeOpa(event)" value="0"/> Opacity: 0
    </div>

    <div id="parent">
        I am a parent element <br/>

        <div class="child">
            I am a child element. <br/>
            {opacity: 1}
        </div>
        <div class="child" style="opacity: 0.5">
            I am a child element. <br/>
            {opacity: 0.5}
        </div>
        <br/>
        ...
    </div>

</body>
</html>

Z.B, Ändern Sie ein Foto (Image) wenn der Zeiger über das Foto ist.

opacity-hover-example.html

<!DOCTYPE html>
<html>
<head>
    <title>CSS Opacity</title>
    <meta charset="UTF-8"/>

    <style>
       .my-image {
          margin: 5px;
       }
       .my-image:hover {
           opacity: 0.5;
       }
    </style>
</head>
<body>
    <h3>CSS Opacity</h3>

    <p style="color:blue;">Move the cursor over Image</p>

    <img class="my-image" src="../images/flower.png" />

</body>
</html>

2- RGBA

Die Anwendung der Funktion RGBA hilft Ihnen bei der Farbenerstellung durch die Verbindung von 4 Werten Red, Green, Blue, Alpha. Inzwischen sind Red, Green, Blue die Integer, die die Werten von 0-255 bekommen. Alpha vertritt die Opazität, es bekommt die Werte von 0-1.

rgba(76, 175, 80, 0.1)

rgba(76, 175, 80, 0.15)

rgba(76, 175, 80, 1)

Die Farbe wird durch RGBA mit der Öpazität erstellt. Sie können diese Farbe als Farbe-Hintergrund für das Element verwenden. Diese Opazität wirkt sich mit dem Hintergrund des Element. Es wirkt nicht mit der Inhalt des Element und Sub-Elementen.

TODO Link!

grba-example.html

<!DOCTYPE html>
<html>
<head>
    <title>Transparent Box</title>
    <meta charset="UTF-8"/>
    <style>
       div {
         padding: 5px;
       }
    </style>
</head>
<body>
    <h3>Transparent Box</h3>

    <p style="color:blue;">With opacity:</p>
    <div style="background-color: rgba(76, 175, 80); opacity:0.1;">
        {opacity:0.1}
    </div>
    <div style="background-color: rgba(76, 175, 80); opacity:0.3;">
        {opacity:0.3}
    </div>
    <div style="background-color: rgba(76, 175, 80);opacity:0.6;">
        {opacity:0.6}
    </div>
    <div style="background-color: rgba(76, 175, 80);">
        {opacity:1.0}
    </div>

    <p style="color:blue;">With RGBA color values:</p>
    <div style="background-color: rgba(76, 175, 80, 0.1);">
         {background-color: rgba(76, 175, 80, 0.1);}
    </div>
    <div style="background-color: rgba(76, 175, 80, 0.3);">
         {background-color: rgba(76, 175, 80, 0.3);}
    </div>
    <div style="background-color: rgba(76, 175, 80, 0.6);">
         {background-color: rgba(76, 175, 80, 0.6);}
    </div>
    <div style="background-color: rgba(76, 175, 80);">
        {background-color: rgba(76, 175, 80);}
    </div>

</body>
</html>

Z.B: Erstellen Sie eine fast transparente Schachtel (Box), die die Bezeichnung eines Foto enthält.

grba-example2.html

<!DOCTYPE html>
<html>
<head>
    <title>Transparent Box</title>
    <meta charset="UTF-8"/>
    <style>
       .img-container {
          display: inline-block;
          position: relative;
       }
       .img-desc {
          position: absolute;
          left: 5px;
          right: 5px;
          bottom: 15px;
          padding: 5px;
          text-align: center;
          background-color: rgba(76, 175, 80, 0.3);
          color: white;
       }
    </style>
</head>
<body>
    <h3>Transparent Box</h3>

    <div class = "img-container">
       <img src="../images/image.png" width="320" height="178"/>
       <div class="img-desc">
          This is an Image
       </div>
    </div>

</body>
</html>

View more Tutorials:

Anleitungen CSS