NetPlusMédia

Opacité en CSS

Retour

Compatibilités


opacity : Safari 3.1 et + , Chrome 4 et + , FireFox 2 et + , Opéra 9 et + , Internet Explorer 9 et + (de 5.5 à 8 : partiellement)

rgba : Safari 3.1 et + , Chrome 4 et + , FireFox 2 et + , Opéra 9.5 et + , Internet Explorer 9 et +

 Safari 3.1 et + , Chrome 4 et + , FireFox 2 et + , Opéra 9 et + , Internet Explorer 9 et + (de 5.5 à 8 : partiellement)

Opacité.html

  1. <!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN'
  2. 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
  3. <html xmlns='http://www.w3.org/1999/xhtml' xml:lang='fr' lang='fr'>
  4. <title>Opacit&eacute; en CSS</title>
  5. <meta http-equiv='content-type' content='text/html; charset=iso-8859-1'/>
  6.  
  7.  
  8. <!-- Style CSS -->
  9. <link rel='stylesheet' type='text/css' href='Opacit&eacute; CSS.css' />
  10.  
  11.  
  12.  
  13. </head>
  14.  
  15.  
  16. <div class='opacite_css' id="opacite_css_1">Survolez-moi<br /><br />Transparence de l&#39;&eacute;l&eacute;ment en entier</div>
  17.  
  18. <div class='opacite_css' id="opacite_css_2">Survolez-moi<br /><br />Transparence du fond uniquement</div>
  19.  
  20. <div class='opacite_css' id="opacite_css_3">Survolez-moi<br /><br />Avec un animation</div>
  21.  
  22.  
  23. <!-- Javascript -->
  24.  
  25. </body>
  26. </html>

Opacité CSS.css

  1. .opacite_css{
  2. float:left;
  3. width:30%;
  4. margin-right:1%;
  5. padding:5px 1%;
  6. text-align:center;
  7. color:#fff;
  8. background-color:#000;
  9. font-weight:bold;
  10. }
  11.  
  12. #opacite_css_1:hover{
  13. /*
  14.   -webkit : Chrome, Safari, Android
  15.   -khtml : Konqueror
  16.   -moz : Firefox et Mozilla
  17.   -ms : Internet Explorer
  18.   -o : Opera
  19.   */
  20. -webkit-opacity:0.4;
  21. -khtml-opacity:0.4;
  22. -moz-opacity:0.4;
  23. -ms-opacity:0.4;
  24. -o-opacity:0.4;
  25. opacity:0.4;
  26. filter:alpha(opacity=40);
  27. }
  28.  
  29. #opacite_css_2:hover{
  30. background-color:rgba(0,0,0,0.4);
  31. }
  32.  
  33. #opacite_css_3:hover{
  34. background-color:rgba(0,0,0,0.4);
  35. -webkit-transition:background-color 0.3s ease;
  36. -khtml-transition:background-color 0.3s ease;
  37. -moz-transition:background-color 0.3s ease;
  38. -ms-transition:background-color 0.3s ease;
  39. -o-transition:background-color 0.3s ease;
  40. transition:background-color 0.3s ease;
  41. }

Démonstration

Opacité en CSS
Survolez-moi

Transparence de l'élément en entier
Survolez-moi

Transparence du fond uniquement
Survolez-moi

Avec un animation
Plan du site - Contact - Google+ - FaceBook - Twitter