Wickham's XHTML & CSS tutorial

Sitemap | Home | Search

Opacity

View in Firefox, Safari, Opera and IE but IE6 often needs different solutions. In general IE7 and IE8 display like Firefox apart from the HTML5 and CSS3 features. The IE9 & above updates are mainly related to HTML 5 and CSS3 issues and display to a large extent like other main browsers. Google Chrome is based on the same WebKit engine as Safari.

Some of the examples are provided just to show problems, others show solutions that work in most major browsers. Use the example that suits you.
red icon problems   gold icon warning: works in some situations or some browsers or needs care to display as you wish   green icon OK in Firefox, Safari, Opera, Google Chrome and IE


Emulating opacity in IE8

IE8 does not support the opacity attribute (which is supported by Firefox) with either strict or transitional doctype (but will without any doctype which is not recommended).

Viewers who find a page with opacity or some other feature that is not displaying correctly in IE8 can use Tools, Compatibility View to change IE8 into IE7 just for that page or any other page they choose to add to the settings box.

As a web page coder the correct and new method for IE8 is to add a -ms- prefix to the filter style as shown in item 1 in addition to the opacity and filter styles for other browsers. This page says Due to a peculiarity in our parser, you need to include the updated syntax first before the older syntax in order for the filter to work properly in Compatibility View (This is a known bug and will be fixed upon final release of IE8).

As an alternative you can instruct IE8 to adopt a previous version of IE in a meta tag for a whole page or a whole website which is easier if you have several items on a page which don't show properly in IE8. You can add this meta tag:-

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

just after the <head> tag of this page so that IE8 viewers will see the opacity without needing to use Compatibility View.


Generally

See the page source for the opacity and filter styles in the head section of this page and see css3.info for further details.

 

1 green icon Opacity can be applied to text, images or backgrounds with the addition of the style:-
.trans75 { opacity: 0.75; -ms-filter: "alpha (opacity=75)"; filter: alpha (opacity=75); }
for a class with 75% opacity or any value between 1.0 or 100 or 100% (fully opaque) and 0.0 (fully transparent). It isn't necessary to state values of 1.0 because that is the default opacity value. It needs ActiveX enabled in IE although Firefox does not need javascript enabled. -ms-filter: "alpha (opacity=75)" has been added for IE8. The order of the styles is very important.

Note that single quotes ' instead of double " are required for a -ms-filter inline style for IE8 <img style="opacity: 0.75; -ms-filter: 'alpha (opacity=75)'; filter: alpha (opacity=75); width: 50px; height: 50px;" src="images/beetle50x50.jpg" alt="beetle"/> whereas " works within head section style tags or in a stylesheet.

beetle
1.0
beetle
0.75
beetle
0.50
beetle
0.25
 

Opacity is a CSS3 property but CSS2 validators are not set up for that yet but you may use it in modern browsers except IE. Whilst CSS3 does include an "opacity" property, "filter" is not CSS3; it's an IE-only property. So IE will read the "filter" declaration, and every other browser will happily ignore it but both "opacity" and "filter" raise errors with CSS2 validators. Validation is a tool, not a goal. The validator will help you find mistakes but since "filter" isn't a mistake and "opacity" will be valid in CSS3, just ignore the validation errors.


2 green icon Mouseover effects can be obtained with different opacity values but javascript or ActiveX is required. The opacity applies to the background and the text.

Hover here. The Filter Opacity works in Mozilla and IE. It also works in current versions of Opera. This is useful for links.

or for a link button:-

swan

There must be a size for the element.


3a red icon The following example shows that if a containing div has opacity less than 1.0, elements inside cannot return to an opacity of 1.0, they always inherit the opacity value. Opacity sets the opacity value for an element and all of its children.

Text in a containing div which has opacity 50%

The following images have opacity ranges as in item 1:-

beetle
1.0
beetle
0.75
beetle
0.50
beetle
0.25

This is a div which is not required to have opacity less than 1.0 but is within the containing div with opacity 50%. This div has style="background-color: silver; opacity: 1.0; filter: alpha (opacity=100);" However, the opacity of the containing div cannot be cancelled (dis-inherited).


3b red icon This also applies if the containing div has a background-image and opacity less than 1.0 to create opacity in the background-image; everything inside the div has opacity less than 1.0 also. You need to create an image with the required opacity with photo/image software and then put it as a background-image in a div with no opacity setting,

Text in a containing div which has opacity 50%

The following images have opacity ranges as in item 1:-

beetle
1.0
beetle
0.75
beetle
0.50
beetle
0.25

This is a div which is not required to have opacity less than 1.0 but is within the containing div with opacity 50%. This div has style="background-color: silver; opacity: 1.0; filter: alpha (opacity=100);" However, the opacity of the containing div cannot be cancelled (dis-inherited).


3c green icon However, you can make a background-image less than 1.0 opacity and have a text or images on top without opacity by having a div with position: absolute with no opacity containing text or images overlaid on the containing div with a background-image and with the opacity.

You must not contain the div with no opacity inside the div with opacity less than 1.0. If both are contained in another containing div with position: relative both divs will stay in the normal flow of the page if text size is increased. If this is not done the div with position: absolute will stay where it is while the div it is supposed to sit over will move.

The following example on the left shows how to have one div with a background-image that has opacity of less than 1.0 and another silver div on top that has opacity of 1.0 containing text or images (ie no transparency); both are contained in a main containing div with position: relative.
The example on the right has background-color: transparent for the lower position: absolute div with no opacity setting.
The upper text in the examples below is inside the containing div with the opacity less than 1.0 and without position: absolute so it is affected by the opacity less than 1.0 as in previous examples.

Text in a containing div which has opacity 50%

This is a div which is not required to have opacity less than 1.0 and has been coded with position: absolute so that it is not affected by the opacity less than 1.0 of the div it is positioned over. This div has position: absolute; top: 150px; left: 3px; width: 314px; background-color: silver; height: 140px; but no opacity setting; overflow: auto; has been added for scrolling with larger text.

Text in a containing div which has opacity 50%

This is a div which is not required to have opacity less than 1.0 and has been coded with position: absolute so that it is not affected by the opacity less than 1.0 of the div it is positioned over. This div has position: absolute; top: 150px; left: 3px; width: 314px; background-color: transparent; height: 140px; but no opacity setting; overflow: auto; has been added for scrolling with larger text.

 

The css style code for the right hand example above in the head section is:-

<style type="text/css">
.trans50 { opacity: 0.50; -ms-filter: "alpha (opacity=50)"; filter: alpha (opacity=50); }
</style>

The html code for the right hand example above is:-

<div class="noborder" style="position: relative; float: right; width: 320px;"> <!--containing div with position: relative for div without position: absolute but with opacity less than 1.0 and also for position: absolute div with no opacity setting.-->
 
<div class="trans50" style="width: 320px; background-image: url(littleegret.jpg); height: 295px; top: 0px; left: 0px;"> <!--this div has the opacity less than 1.0.-->
<p>Text in a containing div which has opacity 50%</p>
</div> <!--end of containing div with opacity less than 1.0-->
 
<!--The following div is outside div with opacity less than 1.0 but inside div with position: relative so that it is contained within normal flow of remainder of page.-->
<div style="position: absolute; top: 150px; left: 3px; width: 314px; background-color: transparent; height: 140px; overflow: auto;">

<p style="margin: 0; color: #000000;">This is a div which is not required to have opacity less than 1.0 and has been coded with position: absolute so that it is not affected by the opacity less than 1.0 of the div it is positioned over. This div has position: absolute; top: 150px; left: 3px; width: 314px; background-color: transparent; height: 140px; but no opacity setting; overflow: auto; has been added for scrolling with larger text.</p>
</div>
 
</div> <!--end of containing position: relative div to hold position: absolute div-->


4 gold icon Graded opacity can be achieved BUT THIS ONLY WORKS IN IE and with ActiveX. It is effective with images but not with text. A width or height must be included in the code which for style=2 (radial) is:-

<img class="grade2" style="width: 200px; height: 50px; border: none;" src="images/horses200x50.jpg" alt="horses"/>

The style is:- .grade2 { -ms-filter: "alpha(finishopacity=0, style=2)"; filter: alpha(finishopacity=0, style=2); }

Note that single quotes ' instead of double " are required for a -ms-filter inline style for IE8 <img style="-ms-filter: 'alpha(finishopacity=0, style=2)'; filter: alpha(finishopacity=0, style=2); width: 200px; height: 50px; border: none;" src="images/horses200x50.jpg" alt="horses"/> whereas " works within head section style tags or in a stylesheet.

Graded Opacity for text; Style=1 (only works in IE and not very successfully)

horses
style=1 (horizontal)

horses
style=2 (radial)

horses
style=3 (rectangular)

Robin and link to Wickham
Radial opacity as a link
Robin and link to Wickham
Radial opacity link with inline style
 

5 gold icon It will be possible to add opacity by using the three-code color reference followed by the opacity value as in:-
{ color: rgba ( 0, 0, 255, 0.75 ) }
but this is for the CSS3 standard and will not work with CSS2. See webdesign and w3.org and CSS3 for further information.
Opacity sets the opacity value for an element and all of its children; however RGBA sets the opacity value only for a single declaration.


Notes

View/Source or View/Page Source in browser menu to see all xhtml code.

The body of this page has margin: 20px. The examples above are in a containing div with width: 730px; and margin: auto; so that the page centralises at large screen resolutions.

A lot of codes have been put in html tags in my examples rather than in a stylesheet or in a style in the head. I have done this for the convenience of the viewer so that most (but not all) codes are in one place and the stylesheet does not always have to be viewed in addition. When coding your own page you should try to put as much as possible in a stylesheet and link with id or class to the html tag.

Remember that when a Doctype is included above the head before the html tag (as it should be) then the overall width of a div is its defined width plus borders, margins and padding widths.

If there are differences between Firefox and IE6 that cannot be overcome with one code, code first to get a satisfactory solution in Firefox then create an IF style which will only apply to IE6:-
for instance, if margin-top: 20px; in Firefox needs to be margin-top: 30px; in IE6 then put the following in the head of the html/xhtml page:-
<!--[if ie 6]> <style type="text/css"> div { margin-top: 30px; } </style> <![endif]-->
or if there are many different styles, create a separate stylesheet:-
<!--[if ie 6]> <link rel="stylesheet" href="ie6.css" type="text/css"/> <![endif]-->
IE6 will contain just the amended styles such as div { margin-top: 30px; } and others (no head or body tags or Doctype).

When looking at a page source for this site you may see code like &lt;p>Little Egret&lt;/p> instead of <p>Little Egret</p>. The code &lt; is because in that instance the code is to be displayed on the screen as text. If the < symbol was placed in the code a browser would activate the code and it would not display as text. Such code is not normally required when writing xhtml code tags which are to be activated.

© Wickham 2006 updated 2008


top | prev | next

 

Google
web www.wickham43.com/