To control the transparency of page elements, use the CSS opacity property. By specification, it is applicable to nodes of any type and is supported in all modern browsers. With it, you can create an interesting design or implement convenient interactive interaction with the user.
Possible Values
The syntax of the opacity property in css looks like this:
selector { opacity: 1; } selector { opacity: 0; } selector { opacity: 0.4; }
The input accepts numerical values in the range from 0 to 1. The parameter can be fractions of one, while a dot is used as a separator of the integer and fractional parts in CSS.
An element with zero transparency becomes invisible, but still continues to take its place on the page and retains the ability to interact with the user.
If the property value is nonzero, then the real transparency will be calculated as a percentage of some upper limit. In normal situations, opacity: 1 determines the complete opacity of the element.
Transparent child nodes
However, if an element has a parent whose transparency is different from unity, the calculation changes. A descendant cannot be “less transparent” than any of its ancestors. The CSS opacity value of the parent block becomes the upper limit of the transparency of the child node.
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 one.
Examples of using
Example 1. Translucency. It is necessary that the main background of the block is visible under the target element.
.target { background: black; opacity: 0.5; }
Not only the background of the target block becomes translucent, but also the text.
Example 2. Dynamic transparency management. The CSS opacity property of the target block changes when you hover over it.
.target { opacity: 0.2; } .target:hover { opacity: 1; }
Dynamic transparency
The final example demonstrates that transparent elements continue to respond to page events, such as hovering. This allows you to use javascript to control the CSS opacity property, as well as apply transition and animation mechanisms to smoothly change the display mode.
To access transparency from a script, you need to access the style object of a particular element.
Block fading can be achieved using the CSS transition property:
element { opacity: 0.1; transition: opacity 1000ms; } element:hover { opacity: 0.8; transition: opacity 2000ms; }
Now the element node, when you hover over the mouse, will change the transparency from 10 to 80% within one second, and when the cursor leaves, it will fade to the original value within two seconds.
The CSS opacity property, combined 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 effect extends not only to the background of the block, but also to its text content, which is preferable to leave clear;
- child elements cannot be less transparent than parent elements.
If these effects make life more difficult for the typesetter, instead of opacity, you should simply use a transparent background, setting its value in RGBA or HSLA format.