devstory

Le Tutoriel de CSS Opacity

  1. CSS Opacity
  2. RGBA

1. CSS Opacity

CSS Opacity permet d'établir l'opacité (opacity) d'un élément. Certains navigateurs acceptent également une valeur en pourcentage (%) mais pas tous.
CSS {opacity: 1} lest l'opacité par défaut d'un élément, cette valeur vous permet de voir l'élément le plus clairement possible. CSS {opacity:0} rendra l'élément transparent.
opacity: <alpha-value>;

/* Example: */

opacity: 1.0;
opacity: 0.5;
opacity: 0;
L'opacité (Opacity), lorsqu'elle s'applique à un élément, aura un effet sur tout le contenu de l'élément, y compris les éléments enfants. Il n'y a pas d'héritage d'opacité, et vous pouvez établir une valeur CSS Opacity différente pour l'élément enfant, mais l'élément enfant est toujours affecté par l'opacité de l'élément parent.
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>
Par exemple, modifiez l'opacité d'une image lorsque le curseur se trouve sur (over) l'image.
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

L'utilisation de la fonction RGBA vous aide à créer une couleur par une combinaison de 4 valeurs Red, Green, Blue, Alpha. Dans lequel Red, Green, Blue sont des nombres entiers (integer)recevant des valeurs de 0-255. Alpha représente l'opacité (opacity), il prend une valeur de 0-1.
rgba(76, 175, 80, 0.1)

rgba(76, 175, 80, 0.15)

rgba(76, 175, 80, 1)
La couleur créée par RGBA a une opacité. Vous pouvez utiliser cette couleur comme couleur d'arrière-plan (background color) pour un élément. Cette opacité ne fonctionne qu'avec le fond (background) de l'élément, elle n'affecte pas le contenu de l'élément et de ses éléments fils.
  • 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>
Par exemple, créez une boîte presque transparente contenant le texte de description d'une image.
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>

Tutoriels CSS

Show More

Articles les plus récents

Show More