CSS transparency is a cross-browser solution - 3.8 out of 5 based on 6 votes

In this lesson, we will look at CSS transparency, learn how to make various elements of the page transparent and achieve full cross-browser compatibility, that is, the same operation of this effect in different browsers.

How to set the transparency of any element

In CSS3, the opacity property is responsible for creating transparent elements, which can be applied to any element. This property has values ​​from 0 to 1, which determine the degree of transparency. Where 0 is full transparency (the default for all elements) and 1 is full opacity. The values ​​are written in fractions: 0.1, 0.2, 0.3, etc.

Usage example:

Cross-browser transparency

Not all browsers have the same understanding and implementation of the above opacity property. In some cases, you need to use a different property name or filters.

The CSS3 opacity property is supported by the following types of browsers Mozilla 1.7+, Firefox 0.9+, Safari 1.2+, Opera 9+.

Such a good :) browser like Internet Explorer up to version 9.0 does not support the opacity property and to create transparency for this browser you need to use the filter property and the alpha value (Opacity = X), in which X is an integer in the range from 0 to 100 with which the level of transparency is determined. 0 is fully transparent and 100 is fully opaque.

As of the Firefox browser prior to 3.5, it supports the -moz-opacity property instead of opacity.

Browsers like Safari 1.1 and Konqueror 3.1 built on the KHTML engine use the: -khtml-opacity property to control transparency.

How do you set transparency in CSS so that it looks the same in all browsers? To create a cross-browser solution for the transparency of elements, they need to register not only one opacity property, but the following set of properties:

filter: alpha (Opacity = 50); / * Transparency for IE * / -moz-opacity: 0.5; / * Support for Mozilla 3.5 and below * / -khtml-opacity: 0.5; / * Support for Konqueror 3.1 and Safari 1.1 * / opacity: 0.5; / * Support for all other browsers * /

Transparency of various elements

Let's look at some examples of setting transparency to certain elements that are most often used on a page.

CSS transparency of the image.

Let's consider several options for creating a translucent picture. In the following example, the first image has no opacity, the second has 50% opacity, and the third 30%.

Result:

Transparency on CSS when hovering over the image.

It is often necessary to make a picture or any other element transparent at the moment when the cursor is hovering over it. This can be done using the CSS pseudo-class: hover. To do this, our picture needs to be assigned two classes, one normal - this will be the inactive state of the picture and the second class with the: hover pseudo-class, here you need to specify the transparency of the picture at the time of hovering the cursor.

You can see the result in the demo.

Background transparency to CSS.

It should be remembered here that transparency applies to all nested elements and they cannot have more transparency than a nested element.

As an example, we will give a variant with a page background created using a picture and a block with a background created using color and having a transparency of 50%.

Sample code:

Here is the output of the above code:

In this lesson, we will analyze such CSS properties - opacity and RGBA... Property Opacity is responsible only for the transparency of elements, and the function RGBA- for color and transparency, if you specify the transparency value of the alpha channel.

CSS Opacity

Numerical value for opacity specified in the range from 0.0 to 1.0, where zero is full transparency, and one, on the contrary, is absolute opacity. For example, in order to see 50% transparency, you need to set the value to 0.5. It must be borne in mind that opacity extends to all children of the parent. This means that the text on a translucent background will also be translucent. And this is already a very significant drawback, the text does not stand out so well.

In the screenshot, you can clearly see that the black text has become the same translucent as the blue background.

Div (
background: url (images / yourimage.jpg); / * Background picture * /
width: 750px;
height: 100px;
margin: auto;
}
.blue (
background: # 027av4; / * Semi-transparent background color * /
opacity: 0.3; / * Background translucency value * /
height: 70px;
}
h1 (
padding: 6px;
font-family: Arial Black;
font-weight: bolder;
font-size: 50px;
}

CSS transparency in RGBA format

Format for recording color RGBA, is a more modern alternative to property opacity. R (red), G (green), B (blue)- means: red, green, blue. The last letter A- means the alpha channel, which sets the transparency. RGBA Unlike Opacity does not affect children.

Now let's look at our example using RGBA... Let's replace these lines in styles.

Background: ## 027av4; /* Background color */
opacity: 0.3; / * background translucency value * /

to the next one line

Background: rgba (2, 127, 212, 0.3);

As you can see, the transparency value of 0.3 is the same for both methods.

Result of example with RGBA:

The second screenshot looks much better than the first one.

Playing with the translucency of the background of the blocks, you can achieve interesting effects on the site. It is important that these translucent blocks go over a variegated design, such as a photograph. Only in this case the effect will be noticeable. This technique has long been used in design, even before the appearance of any CSS3, it was implemented purely in graphics programs.

If the customer requires the layout to look good in older versions of the browser Internet Explorer then add property filter and do not forget to comment out so that the validity of the code is not affected.

Output

Format RGBA are supported by all modern browsers except Internet Explorer... It is also very important that RGBA flexible, it acts only on a specific specified element, without affecting children. It is clear that this is more convenient for the layout designer. My choice is clearly in favor of the format RGBA to receive transparency in CSS.

For better consolidation of the material and greater clarity, I suggest you go through.

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 70% opacity (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.

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 small 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 change 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

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 displayed without transparency, the second with 0.5 transparency

Element translucency

Making the image semi-transparent on hover!

DemoDownload source

Thank you for the attention!

Next article
How to create a scrolling div block?