Le Tutoriel de CSS Opacity

View more Tutorials:

Tutoriels CSS

CSS Opacity
RGBA

Suivez-nous sur notre fanpage pour recevoir des notifications chaque fois qu'il y a de nouveaux articles.

Facebook

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.

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>

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>

View more Tutorials:

Tutoriels CSS