codestory

Die Anleitung zu CSS Opacity

  1. CSS Opacity
  2. 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.
  • Hướng dẫn sử dụng CSS Colors
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>

Anleitungen CSS

Show More

Neueste Artikel

Show More