mozilla

Compare Revisions

opacity

Change Revisions

Revision 646871:

Revision 646871 by Dbs on

Revision 646881:

Revision 646881 by Dbs on

Title:
opacity
opacity
Slug:
Web/CSS/opacity
Web/CSS/opacity
Tags:
"CSS", "Reference", "Référence", "Graphics", "Web", "css3-color", "CSS3", "NeedsLiveSample", "Layout", "CSS Property"
"CSS", "Reference", "Référence", "Graphics", "Web", "css3-color", "CSS3", "Layout", "CSS Property"
Content:

Revision 646871
Revision 646881
n113    <h3 id="Live_Example" name="Live_Example">n
114      Live Example
115    </h3>
116    <pre style="border: solid red; opacity: 0.2; filter: alpha(op
>acity=20); zoom: 1;"> 
117pre {                               /* make the box translucent (
>20% opaque) */ 
118   border: solid red;
119   opacity: 0.2;
120   filter: alpha(opacity=20);       /* IE8 and lower */
121   zoom: 1;       /* set "zoom", "width" or "height" to trigger "
>hasLayout" in IE 7 and lower */  
122}
123</pre>
124    <pre style="border: solid red; opacity: 0.5; filter: alpha(op
>acity=50); zoom: 1;"> 
125pre {                               /* make the box translucent (
>50% opaque) */ 
126   border: solid red;
127   opacity: 0.5;
128   filter: alpha(opacity=50);       /* IE8 and lower */
129   zoom: 1;       /* set "zoom", "width" or "height" to trigger "
>hasLayout" in IE 7 and lower */  
130}
131</pre>
132    <pre style="border: solid red; opacity: 0.8; filter: alpha(op
>acity=80); zoom: 1;"> 
133pre {                               /* make the box translucent (
>80% opaque) */ 
134   border: solid red;
135   opacity: 0.8;
136   filter: alpha(opacity=80);       /* IE8 and lower */
137   zoom: 1;       /* set "zoom", "width" or "height" to trigger "
>hasLayout" in IE 7 and lower */  
138}
139</pre>
n143    <pre class="brush: html">n116    <pre class="brush: css">
144&lt;!doctype html&gt;
145&lt;html&gt;
146&lt;head&gt;
147&lt;style&gt;
n150  filter: alpha(opacity=100);n119  filter: alpha(opacity=100); /* IE8 and lower */
151  zoom: 1;120  zoom: 1; /* Triggers "hasLayout" in IE 7 and lower */
t159&lt;/style&gt;t128</pre>
160&lt;/head&gt;129    <pre class="brush: html">
161 130&lt;img src="//developer.mozilla.org/media/img/mdn-logo.png"
162&lt;body&gt;131     alt="MDN logo" width="128" height="146"
163&lt;img src="//developer.mozilla.org/media/img/mdn-logo.png" alt=132     class="opacity"&gt;
>"MDN logo" width="128" height="146" class="opacity"&gt; 
164&lt;/body&gt;133</pre>
165&lt;/html&gt;134    <pre class="syntaxbox language-html" data-prism-prevent-line-
 >number="1">
135{{EmbedLiveSample('Different_opacity_with_.3Ahover', '640', '64')
 >}}

Back to History