CSS property 3 opacity allows you to make this or that element of the site transparent.

The degree of transparency of the element is determined by the value from 0 before 1 where 0 - completely transparent 1 - opaque at all .. For example, the value 0.5 properties opacity applied to the image will mean that this image should be translucent.

Transparency in IE

Browser Internet Explorer does not support properties opacity up to the ninth version, however, it has its own filter with which you can set the degree of transparency:

filter: alpha(opacity=50)

Meaning opacity for filter Internet browser Explorer can vary from 0 - completely transparent to 100 - opaque

The blocks of this menu will be translucent on hover in IE too!!

home
site `s map
Buy an elephant
sell elephant
Rent an elephant

Prefixes.

On this, in principle, one could finish the chapter on transparency, but I would like to tell you more about the so-called vendor prefixes.. these comrades do not have much to do with this chapter, however, further in the course of learning CSS3, they will meet more and more often and somewhere I need to talk about them - so I'll tell you here.

So, vendor prefixes are special prefixes to CSS properties used by browsers for experimental properties that are not officially part of the CSS specification.

We remember that the CSS 3 specification is still under development and formally the properties described in this tutorial do not exist in nature, but browsers are already actively using them at their own peril and risk.

Why at your own risk? Yes, because it is possible that when the CSS 3 specification is officially approved, the properties described in it will differ in their action from the properties with the same name that are already used by browsers. Well, let's take a look at the CSS 3 specification developers to designate a property opacity not as the degree of transparency of the block, but, for example, as its shading or flickering (of course I write nonsense), which then millions will already display installed browsers for which opacity is that transparency?

Or let's say browser developers came up with their own property - an innovation that no one has anywhere at all, but a document with such a property does not pass the validity check because there is no such property in the specification.

For these and other reasons, browsers use prefixes at the beginning of properties that are not part of the official specification. Each browser has its own prefix starting with the “-” sign, this sign at the beginning of the property, as well as this “_” sign, according to the CSS 2.1 specification, indicates that the property is reserved for CSS extensions of certain browsers.

Here are the most popular browsers and their prefixes:

Browser	Prefix
Opera	-o-
Firefox, SeaMonkey, Camino	-moz-
Internet Explorer 8 and above	-ms-
Safari up to version 3, Konqueror	-khtml-
Safari 3 and above, Google Chrome	-webkit-

Using prefixes is very easy, just take some CSS property and substitute the desired prefix to it, for example, to the property opacity substitute -moz- it turns out: -moz-opacity

Although in fact my expression " use prefixes» wrong! in fact, nothing is substituted anywhere, there is just a property opacity, is there -moz-opacity and these are two different properties that don't have to perform the same function!! - should be understood.

And it should also be understood that certain specific browsers, up to certain versions, can support CSS properties only with their own prefixes (again, I’m expressing myself incorrectly, it’s correct to say my own properties are browser CSS extensions), or they can initially rely on even developed specifications. – We will consider each specific case in this textbook separately.

As regards this chapter on transparency, it should be noted that Firefox browser 3.5 and earlier use their own property -moz-opacity, and the Safari browser before version 1.1 uses its property -khtml-opacity .

So in order to make our example completely cross-browser, we need to add a couple more lines to the code:

As you can see, prefixes significantly stretch the code and their use is not always justified if the versions of browsers that want to work with certain properties only using their own prefixes are quite old, as is the case with the property opacity, then you can not indicate them .. - although of course this is bad advice ..

Now for some helpful tips..

Always use prefixes (well, unless of course one or another browser cannot do without them) in cases where the property used can greatly affect the performance, readability and usability of the site. It’s one thing when some little things in the site design won’t work, and it’s quite another when, for example, the site menu doesn’t work or it’s impossible to read the text on the site due to the fact that the browser does not support some property, but instead uses a similar one of its own.

In CSS, there are three ways to change the transparency of an element:
using the opacity property,
using the rgba() function,
using the hsla() function.

1. The opacity property

The opacity property allows you to make any element of a web page partially or completely transparent. This property changes the transparency of elements that are set to background image(picture) or set the background with a color or gradient. If the element that has the opacity property applied has other elements inside it, they will also change their opacity.
The opacity property takes values ​​between 0 (fully transparent) and 1 (opaque), for example:

H1 (color: #CD6829;) div ( background: #CDD6DB; opacity: .3; )
Rice. 1. Transparency of elements using opacity

2. RGB() function

The RGBA color model creates a color hue by mixing in the required proportions. red, green and blue flowers, and alpha channel (Alpha) is responsible for the degree of transparency of the color. Unlike the opacity property, for a box containing other elements, the rgba() function will only change the opacity of the box.

Rice. 2. RGB color model h1 (color: #CD6829;) div (background: rgba(205, 214, 219, 0.3);)
Rice. 3. Transparency of elements using the rgba() function

3. hsl() function

The hsla() function whose parameters mean tone (hue), Saturation, brightness and alpha channel (Alpha), also allows you to set a translucent color.

Color tints are specified as a percentage using the corresponding value from the color wheel. The circle itself is divided into sectors, on the borders of which there are primary colors:

0/360° - red
60° - yellow
120° - green
180° - blue
240° - blue
270° - purple
300° magenta.

To get black, you need to set the hue, saturation, and brightness values ​​to zero - hsla(0, 0%, 0%, 1) . White is obtained at 100% brightness hsla(0, 0%, 100%, 1) , and gray is obtained at zero value saturation hsla(0, 0%, 50%, 1) .

CSS3 defines the opacity property to apply a transparent effect to page elements. The value of this property is a number between 0.0 and 1.0. A value of zero makes the element completely transparent, while a value of one makes it completely opaque. The property can be applied to any page element.

Img1 ( opacity: 0.2; ) .img2 ( opacity: 0.5; ) .img3 ( opacity: 1.0; )

To set transparency via script use: object.style.opacity

Old Mozilla and Firefox 0.8 use their own name for this property: -moz-opacity To set transparency via script, use: object.style.MozOpacity

Safari 1.1, Konqueror 3.1 - built on the KHTML engine, use property to control transparency: -khtml-opacity To set transparency via script, use: object.style.KhtmlOpacity

Safari has been using CSS3 opacity since version 1.2, but Konqueror older than version 3.1, having stopped supporting -khtml-opacity, did not introduce support for CSS3 opacity.

Internet Explorer from version 5.5 and up to the latest today Internet version Explorer 7 implements transparency through the Alpha DirectX filter. It is worth noting that this filter uses a transparency value in the range from 0 to 100 (and not from 0.0 to 1.0). I also note that the filter can only be applied to an element with the property height, or width, or position set to absolute, or writingMode set to tb-rl, or contentEditable set to true.

Example (set opacity to half):

Img1 ( filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); )/* IE5.5+ syntax (preferred) */ .img2 ( filter: alpha(opacity=50); ) /* IE4 syntax */ To set transparency via script, use: object.style.filter = "progid:DXImageTransform.Microsoft.Alpha(parameter string)"

To get transparency similar to W3C transparency, use "opacity=number from 0 to 100" as the parameter string.

How to make it work in all browsers:

filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); /* IE 5.5+*/ -moz-opacity: 0.5; /* Mozilla 1.6 and below */ -khtml-opacity: 0.5; /* Konqueror 3.1, Safari 1.1 */ opacity: 0.5; /* CSS3 - Mozilla 1.7b+, Firefox 0.9+, Safari 1.2+, Opera 9 */

javascript

function setElementOpacity(sElemId, nOpacity) ( var opacityProp = getOpacityProperty(); var elem = document.getElementById(sElemId); if (!elem || !opacityProp) return; // If there is no element with the specified id or the browser does not support either one of the methods known to the function for controlling transparency if (opacityProp=="filter") // Internet Exploder 5.5+ ( nOpacity *= 100; // If transparency is already set, then change it through the filters collection, otherwise add transparency through style.filter var oAlpha = elem.filters["DXImageTransform.Microsoft.alpha"] || elem.filters.alpha; if (oAlpha) oAlpha.opacity = nOpacity; else elem.style.filter += "progid:DXImageTransform.Microsoft.Alpha(opacity ="+nOpacity+")"; // In order not to overwrite other filters, use "+=" ) else // Other browsers elem.style = nOpacity; ) function getOpacityProperty() ( if (typeof document.body.style.opacity == "string") // CSS3 compliant (Moz 1.7+, Safari 1.2+, Opera 9) return "opacity"; else if (typeof document.body.style.MozOpacity == "string") // Mozilla 1.6 and earlier, Firefox 0.8 return "MozOpacity"; else if (typeof document.body.style.KhtmlOpacity == "string") // Konqueror 3.1, Safari 1.1 return "KhtmlOpacity"; else if (document.body.filters && navigator.appVersion.match(/MSIE ([\d.]+);/)>=5.5) // Internet Exploder 5.5+ return "filter"; return false; // no transparency )

A task

Make a block element with all its content translucent.

Solution

To change the degree of transparency of an element, the style property opacity is used with a value from 0 to 1, where 0 corresponds to full transparency, and 1, on the contrary, to the opacity of the object. In Internet Explorer, this property does not work, so you have to use filter specifically for it, a property that is not part of the CSS specification. Example 1 shows how to set a layer's transparency for all browsers.

Example 1. Semi-transparent layer

HTML5 CSS 2.1 IE Cr Op Sa Fx

Result this example shown in fig. one.

Rice. 1. Semi-transparent layer in the Safari browser

The filter property adds transparency only to those elements where at least one of the sizes (width or height ) is set or the element is set to absolute positioning(position : absolute ).

Also note that transparency affects all the contents of the layer, including child elements, and you won't be able to increase the level of opacity for them by varying the opacity. In example 1, where the layer's transparency is set to 0.7 , the text inside the layer gets the same value. It is permissible to set it less, but the text cannot exceed the transparency value of 0.7.

The CSS opacity property is responsible for the transparency of elements (images, text, blocks) in html.

CSS Syntax

Where value can take real values ​​in the range from 0.0 to 1.0. A value of 1.0 means no transparency (default).

Example #1. transparent image in html

The first image is rendered without transparency, the second one with 0.5 transparency.

Element translucency

Making the image translucent on hover!

DemoDownload sources

Thank you for your attention!

Next article
How to create a scrollable div?