To control the transparency of the page elements, the CSS OPACITY property is used. According to the specification, it applies to nodes of any type and is supported in all modern browsers. With it, you can create an interesting design or implement a convenient interactive interaction with the user.

Possible values

The syntax of the OPACITY property in CSS looks like this:

Selector (OPACITY: 0;) Selector (OPACITY: 0.4;)

The input is accepted by numeric values \u200b\u200bin the range from 0 to 1. The parameter can be a part of the unit, while the point is used as a separator of a whole and fractional part in CSS.

An element with zero transparency becomes invisible, but still continues to occupy its place on the page and saves the ability to interact with the user.

If the value of the property differs from zero, the real transparency will be calculated as a percentage of a certain top limit. In the usual situation, OPACITY: 1 determines the complete opacity of the element.

Transparency of subsidiaries

However, if the element has a parent, whose transparency differs from one, the calculation changes. The descendant cannot be "less transparent" than any of his ancestors. The value of the CSS properties of the parent block becomes the upper limit of the transparency of the subsidiary.

Parent (Opacity: 0.7;) Child (OPACITY: 1;)

In such a situation, the Child element will be 30% transparent, despite the fact that the OPACITY value is equal to one.

Examples of using

Example 1. Translupercy. It is necessary that the Basic Block Block is visible under the Target element.

Target (Background: Black; Opacity: 0.5;)

Translucent becomes not only the background of the Target block, but also the text.

Example 2. Dynamic transparency control. The value of the CSS Opacity property of the TARGET unit changes when the cursor is hovering.

Target (Opacity: 0.2;) .Target: Hover (OPACITY: 1;)

Dynamic transparency

The last example demonstrates that transparent elements continue to respond to page events, such as hovering the cursor. This allows you to use JavaScript to manage the CSS OPACITY property, as well as apply Transition and Animation mechanisms to smoothly change the display mode.

To access transparency from the script, you need to refer to the STYLE object of a specific item.

// Obtaining the current value of transparency VAR OPACITY \u003d ELEMENT.Style.opacity; // Set the new value element.style.opacity \u003d 0.4;

The smooth disappearance of the unit can be implemented using the CSS Properties of Transition:

Element (OPACITY: 0.1; Transition: Opacity 1000ms;) Element: Hover (Opacity: 0.8; Transition: Opacity 2000ms;)

Now the Element node when hovering the mouse will change transparency from 10 to 80% for one second, and when leaving the cursor - fill up to the source value for two seconds.

The CSS OPACITY property in combination with the Transition mechanism allows you to create beautiful effects.

Alpha Channel instead of OPACITY

The main subtleties of the OPACITY mechanism in CSS:

• its action applies not only to the Block background, but also on its text content, which is preferable to leave clear;
• daughter elements Cannot be less transparent than parent.

If these effects complicate the life of the velocker, instead of Opacity, you should use a simply transparent background by defining its value in the RGBA or HSLA format.

CSS3 defines the OPACITY property to apply the transparency effect to the page elements. The value of this property is the number ranging from 0.0 to 1.0. If the value is equal to zero, the element becomes completely transparent, and with a value equal to one, respectively, not completely transparent. The property can be applied to any page elements.

IMG1 (OPACITY: 0.2;) .img2 (Opacity: 0.5;) .img3 (Opacity: 1.0;)

To install transparency through the script, use: object.Style.opacity

Old Mozilla and Firefox 0.8 use your name for this property: -MOZ-OPACITY to install transparency through the script using: object.style.mozopacity

Safari 1.1, Konqueror 3.1 - Built on the KHTML engine, use to control transparency property: -khtml-opacity to install transparency through the script using: object.style.khtmlopacity

Safari from version 1.2 uses CSS3 OPACITY, but at the same time Konqueror older than version 3.1, having stopped supporting -khtml-opacity, did not enter the CSS3 OPACITY support.

Internet Explorer. Starting with version 5.5 and including the last version of Internet Explorer 7, implements transparency through Alpha DirectX filter. It is worth noting that this filter uses the transparency value in the range from 0 to 100 (and not from 0.0 to 1.0). Also, I note that the filter can only be applied to an element with the HEIGHT, or Width property set, or Position with the Absolute value, or WritingMode with the value of TB-RL, or with a contenteditable installed in True.

Example (Install transparency on half):

IMG1 (Filter: Progid: dxiMageTransform.microsoft.alpha (opacity \u003d 50);) / * syntax IE5.5 + (preferred) * / .img2 (Filter: Alpha (Opacity \u003d 50);) / * IE4 * / syntax * / To install transparency through the script, use: object.Style.Filter \u003d "progid: dximageTransform.microsoft.alpha (parameter string)"

To obtain the transparency of similar transparency of W3C, use the value "OPACITY \u003d number from 0 to 100" as the parameter string.

How to do to work in all browsers:

Filter: Progid: dxiMageTransform.microsoft.alpha (opacity \u003d 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 \u003d getopacityProperty (); var elem \u003d document.getelementbyid (selemid); if (! Elem ||! opacityprop) return; // If there is no item with the specified ID or browser does not support One of the known functions of the IF transparency control methods (opacityprop \u003d\u003d "FILTER") // Internet Exploder 5.5+ (nopacity * \u003d 100; // If transparency is already installed, then you change it through the Filters collection, otherwise add transparency via STYLE.Filter Var Oalpha \u003d Elem.Filters ["dximageTransform.microsoft.alpha"] || elem.filters.alpha; if (olpha) olpha.opacity \u003d nopacity; else elem.style.filter + \u003d "progid: dxiMageTransform.microsoft.alpha (opacity \u003d "+ NOPACITY +") "; // In order not to lure other filters using" + \u003d ") ELSE // Other browsers Elem.Style \u003d Nopacity;) Function GetopacityProperty () (ifile.opacity \u003d\u003d "String") // CSS3 COMPLIANT (MOZ 1.7+, Safari 1.2+, Opera 9) Return "OPACITY"; ELSE if (Typeof document.body.style.mozopacity \u003d\u003d "String") // Mozilla 1.6 and younger, Firefox 0.8 Return "Mozopacity"; Else if (Typeof document.body.style.khtmlopacity \u003d\u003d "String") // Konqueror 3.1, Safari 1.1 Return "khtmlopacity"; ELSE If (document.body.appversion && navigator.appversion.match (/ msie ([\\ d] +); /)\u003e \u003d 5.5) // Internet Exploder 5.5+ Return "Filter"; RETURN FALSE; // No transparency)

Creature transparent background In HTML and CSS (OPACITY and RGBA effects)

The effect of translucent the element is well noticeable on the background drawing and got distribution in different operating systemsbecause it looks stylish and beautiful. The main thing is not one-hand drawing under translucent blocks, but the image is precisely in this case the transparency becomes noticeable.

Such an effect is achieved different ways, Including old-fashioned methods, like using PNG pattern as background, creating a checkered image and an OPACITY property. But as soon as the need arises to make a translucent background in the block, these methods are unpleasant side.

Consider the translucency of the text and the background - how to use it correctly in the site design:

The main feature of this property is that the value of transparency acts on all the child elements inside, and not only on the background. This means that the background and text will become translucent. Increase transparency, you can change the OPACITY command from 0.1 to 1.

HTML 5 CSS 3 IE 9

In web design, partial transparency is also used and is achieved due to the RGBA color format, which is set only for the background of the element.

Typically, the design of the element should be translucent in the design, and the text is opaque to preserve its readability. The OPACITY property does not fit here, because the text inside the element will also be partly transparent. It is best to use the RGBA format, part of which is an alpha channel or in other words, the transparency value. RGBA is written as a value, then in brackets through the comma, the values \u200b\u200bof the red, blue and green color components are listed. The latter is transparency, which sets from 0 to 1, while 0 means complete transparency, and 1 opacity of color is the syntax of the RGBA application.

Translucent background HTML 5 CSS 3 IE 9

The lack of opacity for the background is set to 90% - translucent background and opaque text.

Description

Specifies the level of transparency of the web page element. When partial or complete transparency, the background pattern or other elements below the translucent object appears through the element.

Syntax

oPACITY: Value

Values

The value comes from the range as a value. The value of 0 corresponds to the full transparency of the element, and 1, on the contrary - its opacity. Fractional numbers of the form 0.6 establish translucency. It is allowed to write numbers without zero ahead, type Opacity: .6.

HTML5 CSS2.1 CSS3 IE CR OP SA FX

The result of this example is shown in Fig. one.

Fig. 1. The result of using OPACITY

Browsers

Firefox to version 3.5 supports non-standard -MOZ-OPACITY property.

Internet Explorer to version 9.0 to change transparency uses filters, for this browser should be recorded Filter: Alpha (OPACITY \u003d 50), where the Opacity parameter can take a value from 0 to 100.

To create a transparency effect in CSS, the OPACITY property is used.

IE8 browser and earlier versions support an alternative property - Filter: Alpha (OPACITY \u003d X), where "X" can take a value from 0 to 100 than less value, the more transparent will be the element.

All other browsers support standard CSS Property OPACITY, which can be taken as the value of the number from 0.0 to 1.0, the less value, the more transparent it is the element:

Try

Transparency in hovering

Pseudo-class: Hover allows you to change appearance Elements when you hover the mouse cursor. We will take advantage of this possibility that the image when hovering the mouse loses its transparency:

Try

Transparency background

There are two possible method Make an item transparent: The Opacity property described above and indicating the background color in the RGBA format.

Perhaps you are already familiar with the color representation model in RGB format. RGB (Red, Green, Blue - Red, Green, Blue) - Color System defining a shade by mixing red, green and blue flowers. For example, to set a yellow color for text, you can use any of the following ads:

Color: RGB (255,255.0); Color: RGB (100%, 100%, 0);

The colors specified using RGB will differ from the hexadecimal values \u200b\u200bthat we use before that allow you to use the alpha transparency channel. This means that through the background of the element with alpha transparency will be seen what is located under it.

Announcement of RGBA color is similar to syntax with standard RGB rules. However, among other things, we will need to declare as RGBA (instead of RGB) and set an additional decimal transparency value after the color value in the range from 0.0 (full transparency) to 1 (complete opacity).

Color: RGBA (255,255,0,0,5); Color: RGBA (100%, 100%, 0.0.5);

The difference between the Opacity and RGBA property is that the Opacity property applies transparency to the entire element of the entire element, that is, the entire contents of the element becomes transparent. And RGBA allows you to set transparency separate parts Element (for example, only text or background):

Body (icpg) .prim1 (width: 400px; margin: 30px 50px; background-color: #FFFFFF; Border: 1px Solid Black; font-weight: bold; opacity: 0.5; Filter : alpha (opacity \u003d 70); / * for IE8 and earlier versions * / text-align: center;) .prim2 (Width: 400px; Margin: 30px 50px; Background-color: RGBA (255,255,255,0,5); BORDER: 1px Solid Black; Font-Weight: Bold; Text-Align: Center;) Try »

Note: RGBA values \u200b\u200bare not supported in IE8 browser and earlier versions. To declar the backup option for old browsers that do not support the color values \u200b\u200bwith alpha channels, you should specify it first to the value of RGBA: Background: RGB (255,255.0); Background: RGBA (255,255,0,0,5);