In this lesson, we'll take a look at these 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

Numeric value for opacity set 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 propagates to all child elements of the parent. And 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.

The screenshot clearly shows that the black text has become as translucent as the blue background.

Div (
background: url(images/yourimage.jpg); /* Background image */
width: 750px
height: 100px;
margin: auto;
}
.blue(
background: #027av4; /* Translucent 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 writing color RGBA, is a more modern alternative for the property opacity. R (red), G (green), B (blue) means: red, green, blue. last letter A- means the alpha channel, which sets the transparency. RGBA Unlike Opacity does not affect child elements.

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.

The result of the RGBA example:

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 on top of a colorful pattern, such as a photograph. Only in this case the effect will be noticeable. This technique has been used in design for a long time, even before the advent of any CSS3, it was implemented purely in graphic 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 does not suffer.

Conclusion

Format RGBA support all modern browsers except Internet Explorer. It is also very important that RGBA flexible, it acts only on a specific given element, without affecting the children. It is clear that it is more convenient for the coder. My choice is definitely in favor of the format RGBA for getting transparency in css.

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

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?

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

In this tutorial, we will look at CSS transparency, learn how to make various elements of the page transparent and achieve full cross-browser, i.e., the same effect 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 fully transparent (the default value for all elements) and 1 is fully opaque. Values ​​are written as fractions: 0.1, 0.2, 0.3, etc.

Usage example:

Cross browser transparency

Not all browsers perceive and implement the above opacity property in the same way. In some cases it is necessary to use a different property name or filters.

The CSS3 opacity property supports the following types Mozilla browsers 1.7+, Firefox 0.9+, Safari 1.2+, Opera 9+.

So good :) Browser like Internet Explorer up to version 9.0 doesn't support opacity property and to create transparency for this browser you need to use filter property and value alpha(Opacity=X) where X is an integer between 0 and 100 which determines the level of transparency. 0 is full transparency and 100 is full opacity.

Concerning Firefox browser prior to version 3.5 it supports the -moz-opacity property instead of opacity.

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

How to 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

Consider some examples of setting transparency certain elements, which are most often used on the page.

CSS image transparency.

Consider several options for creating a translucent image. In the following example, the first picture has no transparency, the second has 50% transparency, and the third has 30%.

Result:

Transparency in CSS when hovering over an image.

Often needs to be done transparent picture or any other element at the moment when the cursor is hovered over it. This can be done at CSS help pseudo-class:hover. To do this, our picture needs to register two classes, one ordinary - this will be the inactive state of the picture and the second class with the pseudo-class: hover, 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.

CSS background transparency

Here you need to remember that transparency applies to all nested elements and they cannot have more transparency than the nested element.

As an example, let's give a variant with a page background created using an image and a block with a background created using color and having a transparency of 50%.

Code example:

Text

Here is the result of the above code:

orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting It was popularized in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using "Content here, content here", making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for "lorem ipsum" will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).

So, today we will talk about transparency in html pages. You have probably come across transparent pop-up blocks, whether it is a photo gallery or authorization forms on some popular site. There are many uses for transparency in HTML. So how is it made and where can it be used?

Well, for starters, let's clarify that our document has not only one monitor plane - it is generally 3-dimensional, I mentioned this in the article "Z-index". Accordingly, even a completely transparent layer, if it is at the top of the display stack, will block access to other elements. This is one of the main uses of transparent blocks. While a shading effect is usually used, a fully transparent layer will work just the same. So, for example, a lot of popular photo galleries work, a shaded layer is organized in which photos are displayed, and controls for them. The rest of the page space is "covered" with a (semi)transparent layer, blocking access to all other elements on the page. Those. leaving the page by clicking on any link will not work - all the text is covered by the backing. To return to the body of the site, controls are usually provided to close the gallery, login form, etc. Control showing/hiding transparent blocks with using javascript. Unfortunately, there is no alternative here. Without it, the user will either not see the transparent block at all, or will not be able to close it without leaving the current page. I note that the visibility or display properties are used for this.

So how is transparency actually organized in html? Setting the transparency of elements is generally not included in the CSS specification, so you have to use several instructions at once to create it. Some browsers (ie) will work with one option, others with another. Ie uses the built-in filter functionality, other browsers use the "opacity" property, which ranges from 0 (totally transparent object) to 1 (totally opaque). For example, in the case of 30% transparency, you should write " opacity:0.30; filter:alpha(opacity=30);". As can be seen from the example, the properties are similar - only in the first case a number from 0 to 1 is used, in the second a percentage entry. An example of such a block:

<div style= "position:absolute; top: 0; left: 0; background-color:rgb(18, 114, 214); width:100%; id="VideoFrame">

The example uses a video display block that is activated when you click on the video thumbnail. The block is not given a height because it can vary depending on the screen size and page content. In this connection, it is calculated dynamically when the video is opened. An example of the use of this technique can be seen on the main page of the site ruscircus.ru, on which I once worked.

That, in fact, is the whole secret of transparency in html. We use z-index and opacity to get the transparency effect. And there are many applications for this - everything is limited only by your imagination.

08.02.2013 I will answer the questions asked in the comment, namely how to make an opaque block on a transparent block. Everything is simple here, it was not in vain that I indicated in the material a link to the material about z-index, you need to create another block with a larger z-index than the transparent one. Now, in a few minutes, I sketched an example. Blocks:

<div style= "position:absolute; top: 0; left: 0; background-color:rgb(18, 114, 214); width:100%; height:100%; opacity:0.30; filter:alpha(opacity=30); visibility:hidden; z-index:1;" id="VideoFrame"> <div id="VideoFrame2" style= "position:absolute; top: 25%; left: 25%; background-color: white; width:50%; height:50%; opacity:0.99; filter:alpha(opacity=99); visibility:hidden; z-index:2;" onclick = "javascript:HideForm();" > Write text here</div>

And javascript functions

< script type= "text/javascript" >function ShowForm() ( document.getElementById ("VideoFrame" ) .style .visibility = "visible" ; document.getElementById ("VideoFrame2" ) .style .visibility = "visible" ; ) function HideForm() ( document.getElementById (" VideoFrame" ) .style .visibility = "hidden" ; document.getElementById ("VideoFrame2" ) .style .visibility = "hidden" ; )

The first function displays a transparent block (along with an opaque text block) - this can be attached to a button. link, etc.. The second function I have is attached to a mouse click on a block with text - it hides a transparent block.

I hope this clarifies how it works. Well, if not, ask questions.

Transparency in CSS is quite a trendy technique lately, which causes difficulties in cross-browser implementation. Until now, there is no universal method that would allow to implement transparency for all browsers. However, the situation has improved markedly in recent years.

This article details 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 a few years now, it has never been part of the CSS standard. This is a non-standard property that should become 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 is no longer needed unless you are certain 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 stopped supporting it in version 0.9.

CSS transparency in Firefox, Safari, Chrome and Opera

For most modern browsers, it is enough to use the following property:

#myElement ( opacity: .7; )

In the above example, the element is set to 70% opacity (30% transparency). 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 this is hardly noticeable.

CSS transparency for Internet Explorer

As usual, Internet Explorer is not friendly with other browsers. In addition, we now have three versions of this browser in fairly wide use, the transparency setting in each of which is different and sometimes requires additional effort 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's hasLayout property must be 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 enclosed in quotation marks.

Setting and changing CSS transparency with 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, and it will also 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

CSS3 plans to support the alpha channel with 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 level of opacity.

HSLA function

Like the previous function, CSS3 also allows you to set a translucent color using the HSLA function, whose parameters mean Hue (Hue), Saturation (Saturation), Brightness (Lightness) and Alpha channel (Alpha).

#hsla ( background: hsla(207, 38%, 47%, .4); )

An important point when using the rgba and hsla functions is that the transparency setting does not apply to child elements, while the use of the opacity property is inherited.