There are three ways to change the transparency of an element in CSS:
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 have a background image (picture) or a background with a color or gradient. If the element for which the opacity property is applied contains other elements within it, then they will also change their opacity.
The opacity property ranges from 0 (completely transparent) to 1 (opaque), for example:
H1 (color: # CD6829;) div (background: # CDD6DB; opacity: .3;) 
Rice. 1. Transparency of elements using opacity
2. The rgba () function
RGBA color model creates a color cast by mixing in the required proportions red (Red), green (Green) and blue (Blue) colors, and alpha channel (Alpha) is responsible for the degree of transparency of the color. Unlike the opacity property, for a block containing other elements, the rgba () function will only change the opacity of the block.
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. The hsla () function
Hsla () function whose parameters mean tone (Hue), saturation, brightness (Lightness) and alpha channel (Alpha), also allows you to set a semi-transparent 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 ° is 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% luminance hsla (0, 0%, 100%, 1), and gray is obtained at zero saturation hsla (0, 0%, 50%, 1).
The opacity property is used to create a transparency effect in CSS.
IE8 and earlier browsers support an alternative property - filter: alpha (opacity = x), where "x" can take a value from 0 to 100, the lower the value, the more transparent the element will be.
All other browsers support the standard CSS opacity property, which can take as a value numbers from 0.0 to 1.0, the lower the value, the more transparent the element will be:
Try "
Hover transparency
The: hover pseudo-class allows you to change the appearance of elements when you hover over them. We will use this opportunity to make the image lose its transparency on mouse hover:
Try "
Background transparency
There are two possible ways to make an element transparent: the opacity property described above, and specifying the background color in RGBA format.
You may already be familiar with the RGB color representation model. RGB (Red, Green, Blue - red, green, blue) is a color system that determines the hue by mixing red, green and blue colors. For example, you can use any of the following declarations to set the text color to yellow:
Color: rgb (255,255,0); color: rgb (100%, 100%, 0);
The colors specified with RGB will differ from the hex values we used before in that they allow for the alpha transparency channel. This means that the background of an element with alpha transparency will show what is underneath.
The RGBA color declaration is similar in syntax to the standard RGB rules. However, among other things, we need to declare the value as RGBA (instead of RGB) and set an additional decimal value for transparency after the color value in the range from 0.0 (fully transparent) to 1 (fully opaque).
Color: rgba (255,255,0,0.5); color: rgba (100%, 100%, 0.0.5);
The difference between the opacity property and RGBA is that the opacity property applies transparency to the entire element, that is, the entire content of the element becomes transparent. And RGBA allows you to set the transparency of individual parts of an element (for example, only the text or background):
Body (background-image: url (img.jpg);) .prim1 (width: 400px; margin: 30px 50px; background-color: #ffffff; border: 1px solid black; font-weight: bold; opacity: 0.5; filter : alpha (opacity = 70); / * for IE8 and earlier * / 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;) Give it a try "
Note: RGBA values are not supported in IE8 and earlier. To declare a fallback color for older browsers that do not support color values with alpha channels, specify it first before the RGBA value: background: rgb (255,255,0); background: rgba (255,255,0,0.5);
Vlad Merzhevich
The effect of translucency of an element is clearly visible in the background image and has become widespread in different operating systems, because it looks stylish and beautiful. In web design, translucency is also applied and achieved through the opacity property, or the RGBA color format that is set for the background.
Gradient block
Make the block shown in fig. 1. The block contains a semi-transparent gradient frame with a gradient background under the heading and a small pointer. The background on the page is shown only for clarity of the translucency effect, you can specify any of your own images. The minimum block height is 100px.
How do I make a layer semi-transparent?
To change the opacity of an element, use the opacity style property with a value from 0 to 1, where 0 corresponds to full transparency, and 1, on the contrary, to the opacity of the object. This property does not work in Internet Explorer, 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 layer transparency for all browsers.
Translucent background
Vlad Merzhevich
Partial transparency, when used correctly, looks very impressive in website design. The main thing is that under the translucent blocks there is not a single-color pattern, but an image, in this case the transparency becomes noticeable. This effect is achieved in different ways, and if you remember everything, including the old-fashioned methods, then it is using a PNG image as a background, creating a checkered image and the opacity property. But as soon as it becomes necessary to make a translucent background in a block, these methods have an unpleasant downside. I will make a short overview so that it becomes clear what is at stake, as well as for those readers who are not familiar with unconventional options for creating a translucency effect.
How to set the table to semi-transparent, but some of the cells are not?
To change the transparency of an element in CSS3, the opacity property is provided, its value can vary from 0 to 1. Zero corresponds to the full transparency of the element, and one, on the contrary, to opacity. Modern browsers work quite correctly with this property, with the exception of Internet Explorer, so for it you have to use a special filter property with the alpha value (Opacity = X), where X can vary from 0 to 100.
The opacity CSS property is responsible for the transparency of elements (images, text, blocks) in html.
CSS opacity syntax
opacity: value;
Where value can take real values in the range from 0.0 to 1.0. A value of 1.0 means no transparency (default).
Examples: how transparency in html
Example # 1. Transparent image in html
The first image is displayed without transparency, the second with 0.5 transparency
Example # 2. Effects with transparency in html
By default, the block is partially transparent. When you hover over the mouse, the block becomes bright. Such effects are often used in website design.
The page is converted to the following
Example No. 3. Transparent block on image in html
Below is an example of a semi-transparent block that partially obscures the image. The block deliberately covers the image not completely in order to show how it looks against an empty background.
The page is converted to the following
Transparency in CSS has been a pretty trendy technique lately and is causing difficulties in cross-browser implementation. Until now, there is no one-size-fits-all method for implementing transparency across all browsers. Recently, however, the situation has improved markedly.
This article takes a detailed look at existing approaches, and provides code examples and explanations to help you achieve the same result in all browsers with minimal effort.
Another point worth mentioning is that although transparency has been around for several years, it has never been part of the CSS standard. This is a non-standard property and should be part of the CSS3 specification.
Old Approach
In older versions of Firefox and Safari, you need to apply the property like this:
#myElement (-khtml-opacity: .5; -moz-opacity: 0.5;)
The -khtml-opacity property was used in older versions of webkit browsers. This property is deprecated and no longer needed unless you are sure that a significant portion of your site's traffic comes from visitors using Safari 1.x, which is of course unlikely.
The next line uses the -moz-opacity property, which worked on very early versions of the Mozilla engine. Firefox ended support for it in version 0.9.
CSS transparency in Firefox, Safari, Chrome and Opera
For most modern browsers, the following property is sufficient:
#myElement (opacity: .7;)
In the above example, the element is set to an opacity value of 70% (30% opacity). That is, if we set the value to one, then the element will be opaque, and, accordingly, setting this value to zero will make it invisible.
The opacity property handles 2 decimal digits. That is, the value ".01" will differ from the value ".02", although it is not very noticeable.
CSS transparency for Internet Explorer
As usual, Internet Explorer is not on friendly terms with other browsers. In addition, we now have three versions of this browser in fairly widespread use, the setting of transparency in each of which is different and sometimes requires additional efforts to obtain a positive result.
#myElement (filter: alpha (opacity = 40);)
This example uses the filter property, which works in versions 6-8, but there is one limitation for versions 6 and 7: the element must have its hasLayout property set to true. This property is present only in IE and you can read more about it, for example, on Habré.
Another way to set transparency using CSS in IE8 is to use the following approach (note the comments):
#myElement (filter: progid: DXImageTransform.Microsoft.Alpha (opacity = 40); / * works in IE6, IE7 and IE8 * / -ms-filter: "progid: DXImageTransform.Microsoft.Alpha (opacity = 40)"; / * IE8 only * /)
The first line will work in all currently used versions, the second only in IE8. Note that the second line uses the -ms- prefix and the value is quoted.
Setting and changing CSS transparency using JavaScript or jQuery
You can use the following code to set transparency:
Document.getElementById ("myElement"). Style.opacity = ".4"; // for most browsers document.getElementById ("myElement"). style.filter = "alpha (opacity = 40)"; // for IE
Of course, in this case it is much easier to use jQuery, in addition, it will work in all browsers:
$ ("# myElement"). css ((opacity: .4)); // works in all browsers
You can animate this property:
$ ("# myElement"). animate ((opacity: .4), 1000, function () (// Animation complete; this code works in all browsers.));
RGBA function
It is planned to support the alpha channel in CSS3 using the rgba function. This feature works in Firefox 3+, Opera 10.1+, Chrome 2+, Safari 3.1+. It is used like this:
#rgba (background: rgba (98, 135, 167, .4);)
In this case, the last parameter indicates the opacity level.
HSLA function
Similar to the previous function, CSS3 also allows you to set a semi-transparent color using the HSLA function, whose parameters are Hue, Saturation, Lightness and Alpha channel.
#hsla (background: hsla (207, 38%, 47%, .4);)
An important point when using the rgba and hsla functions is that the opacity setting is not applied to the child elements, while the opacity property is inherited.