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)
- <!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN'
- 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
- <html xmlns='http://www.w3.org/1999/xhtml' xml:lang='fr' lang='fr'>
- <head>
- <meta http-equiv='content-type' content='text/html; charset=iso-8859-1'/>
-
-
- <!-- Style CSS -->
- <link rel='stylesheet' type='text/css' href='Opacité CSS.css' />
-
-
-
- </head>
- <body>
-
-
-
-
-
-
- <!-- Javascript -->
-
- </body>
- </html>
- .opacite_css{
- float:left;
- width:30%;
- margin-right:1%;
- padding:5px 1%;
- text-align:center;
- color:#fff;
- background-color:#000;
- font-weight:bold;
- }
-
- #opacite_css_1:hover{
- /*
- -webkit : Chrome, Safari, Android
- -khtml : Konqueror
- -moz : Firefox et Mozilla
- -ms : Internet Explorer
- -o : Opera
- */
- -webkit-opacity:0.4;
- -khtml-opacity:0.4;
- -moz-opacity:0.4;
- -ms-opacity:0.4;
- -o-opacity:0.4;
- opacity:0.4;
- filter:alpha(opacity=40);
- }
-
- #opacite_css_2:hover{
- background-color:rgba(0,0,0,0.4);
- }
-
- #opacite_css_3:hover{
- background-color:rgba(0,0,0,0.4);
- -webkit-transition:background-color 0.3s ease;
- -khtml-transition:background-color 0.3s ease;
- -moz-transition:background-color 0.3s ease;
- -ms-transition:background-color 0.3s ease;
- -o-transition:background-color 0.3s ease;
- transition:background-color 0.3s ease;
- }