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 property opacity, 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 appearance elements when you hover over them with the mouse cursor. We will use this opportunity to make the image lose its transparency on mouse hover:

Try "

Background transparency

There are two possible ways make element transparent: 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) - 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 the alpha transparency channel to be used. 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 transparency separate parts element (for example, only 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);

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 , remaining essentially unchanged. 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 humor and the like).

So, today we will talk about transparency in html pages. You've probably come across transparent pop-up blocks, be it a photo gallery or login forms on some popular website. There are many uses for transparency in html. So how is it done and where can it be used?

Well, to begin with, let's understand that our document has not only one monitor plane - it is, generally speaking, three-dimensional, as I mentioned in the article "Z-index". Accordingly, even a completely transparent layer, if it appears on the top of the display stack, will block access to other elements. This is one of the main uses of transparent blocks. Even though a shading effect is usually used, a fully transparent layer will work the same way. 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 is "covered" with a (semi) transparent layer that prevents access to all other elements on the page. Those. you won't be able to leave the page by clicking any link on it - all the text is covered with an underlay. To return to the body of the site, they usually provide controls for closing the gallery, login form, etc. Control showing / hiding transparent blocks using javascript. Here, unfortunately, there is no alternative to it. Without using 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. 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 (fully transparent object) to 1 (fully opaque). For example, in the case of 30% transparency, write " opacity: 0.30; filter: alpha (opacity = 30);". The properties, as you can see from the example, 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, which is activated when you click on a video thumbnail. The block is not given a height because it can be different depending on the screen size and page content. In this connection, it is calculated dynamically when the video is opened. An example of using this technique can be seen on the main page of the ruscircus.ru site, on which I worked at one time.

That's the whole secret of html transparency. We use z-index and opacity to get the transparency effect. And you can find many applications for this - everything here 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 for nothing 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 have 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 ();" > Here we write the text</ 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) - it can be attached to a button. link, etc. The second function I have is tied to a mouse click on a block with text - it hides the transparent block.

Hopefully clarified how it works. Well, if not, ask questions.

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?

/* 06.07.2006 */

CSS transparency (css opacity, javascript opacity)

Transparency is the topic of this article. If you are interested in learning how to make html page elements transparent using CSS or Javascript, and how to achieve cross-browser behavior (the same work in different browsers), taking into account Firefox, Internet Explorer, Opera, Safari, Konqueror browsers, then you are welcome. In addition, let's take a look at a ready-made solution to gradually change transparency using javascript.

CSS opacity

CSS opacity symbiosis

By symbiosis I mean combining different styles for different browsers in one CSS rule to get the desired effect, i.e. for cross-browser implementation.

Filter: progid: DXImageTransform.Microsoft.Alpha (opacity = 50); / * IE 5.5 + * / -moz-opacity: 0.5; / * Mozilla 1.6 and below * / -khtml-opacity: 0.5; / * Konqueror 3.1, Safari 1.1 * // * CSS3 - Mozilla 1.7b +, Firefox 0.9 +, Safari 1.2+, Opera 9 * /

In fact, the first and last rules are needed, for IE5.5 + and browsers that understand CSS3 opacity, and the two rules in the middle obviously do not make the weather, but they do not really interfere (decide for yourself whether you need them).

Javascript opacity symbiosis

Now let's try to set transparency through a script, taking into account the peculiarities of different browsers described above.

Function setElementOpacity (sElemId, nOpacity) (var opacityProp = getOpacityProperty (); var elem = document.getElementById (sElemId); if (! Elem ||! OpacityProp) return; // If there is no element with the specified id, or the browser does not support any of the known functions of how to control transparency if (opacityProp == "filter") // Internet Exploder 5.5+ (nOpacity * = 100; // If transparency is already set, then change it through the filters collection, otherwise add transparency through style.filter var oAlpha = elem.filters ["DXImageTransform.Microsoft.alpha"] || elem.filters.alpha; if (oAlpha) oAlpha.opacity = nOpacity; else elem.style.filter + = "progid: DXImageTransform.Microsoft.Alpha (opacity =" + nOpacity + ")"; // In order not to overwrite other filters, use "+ =") else // Other browsers elem.style = nOpacity; ) function getOpacityProperty () (if (typeof document.body.style.opacity == "string") // CSS3 compliant (Moz 1.7+, Safari 1.2+, Opera 9) return "opacity"; else if (typeof document.body.style.MozOpacity == "string") // Mozilla 1.6 and earlier, Firefox 0.8 return "MozOpacity"; else if (typeof document.body.style.KhtmlOpacity == "string") // Konqueror 3.1, Safari 1.1 return "KhtmlOpacity"; else if (document.body.filters && navigator.appVersion.match (/ MSIE ([\ d.] +); /)> = 5.5) // Internet Exploder 5.5+ return "filter"; return false; // no transparency }

The function takes two arguments: sElemId - the id of the element, nOpacity - a floating point number from 0.0 to 1.0 specifying the CSS3 opacity.

I think it might be worth clarifying the IE-related part of the setElementOpacity function.

Var oAlpha = elem.filters ["DXImageTransform.Microsoft.alpha"] || elem.filters.alpha; if (oAlpha) oAlpha.opacity = nOpacity; else elem.style.filter + = "progid: DXImageTransform.Microsoft.Alpha (opacity =" + nOpacity + ")";

The question may arise, why not set transparency by assigning (=) to the elem.style.filter = "..." property; ? Why use "+ =" to add a filter property to the end of a line? The answer is simple, so as not to "overwrite" other filters. But at the same time, if you add a filter in this way a second time, then it will not change the previously set values ​​of this filter, but will simply be added to the end of the property line, which is not correct. Therefore, if the filter is already installed, then you need to manipulate it through the collection of filters applied to the element: elem.filters (but keep in mind, if the filter has not yet been assigned to the element, then it is impossible to manage it through this collection). The elements of the collection can be accessed either by filter name or by index. However, the filter can be specified in two styles, IE4 short style, or IE5.5 + style, which is taken into account in the code.

Smooth change of element transparency

Turnkey solution. Using the opacity.js library

fadeOpacity (this.id, "oR1")"onmouseout =" fadeOpacity.back (this.id)"src =" / img / strawberry.jpg "width =" 100 "height =" 80 "/> fadeOpacity (this.id, "oR1")"onmouseout =" fadeOpacity.back (this.id)"src =" / img / tomato.jpg "width =" 82 "height =" 100 "/> fadeOpacity (this.id, "oR1")"onmouseout =" fadeOpacity.back (this.id)"src =" / img / sweet_cherry.jpg "width =" 98 "height =" 97 "/>

Basic steps:

1. We connect the library of functions;
2. We define rules using the method fadeOpacity.addRule ();
3. Calling the method fadeOpacity () to change the transparency from the start value to the end value, or fadeOpacity.back () to return to the initial value of the transparency level.

Chew

How to connect the library, I think, can be seen from the example above. Now it is worth explaining the definition of the rules. Before calling the methods for smoothly changing transparency, you need to determine the rules by which the process will be executed: you need to define the initial and final transparency, and also, if desired, specify a delay parameter that affects the speed of the transparency change process.

Rules are defined using the method fadeOpacity.addRule

Syntax: fadeOpacity.addRule (sRuleName, nStartOpacity, nFinishOpacity, nDalay)

Arguments:

• sRuleName - the name of the rule, set arbitrarily;
• nStartOpacity and nFinishOpacity - starting and ending transparency, numbers in the range from 0.0 to 1.0;
• nDelay - delay in milliseconds (optional, defaults to 30).

We call the transparency fading itself through the fadeOpacity (sElemId, sRuleName) methods, where sElemId is the element id, and sRuleName is the rule name. To return transparency to its original state, use the fadeOpacity.back (sElemId) method.

: hover to easily change transparency

I also note that for a simple change of transparency (but not a gradual change), the pseudo-selector is just right : hover, which allows you to define styles for an element when you hover over it.

Note that the picture is placed inside element A. The point is that Internet Explorer up to version 6 understands the: hover pseudo-selector, only applied to links, and not to any elements, as it should be in CSS (in IE7 the situation is fixed).

Transparency and jagged text in IE

With the release of Windows XP, antialiasing of screen fonts appeared using the method ClearType and with it the side effects in IE when using this anti-aliasing method. In our case, if transparency is applied to an element with text when the anti-aliasing method ClearType is enabled, then the text stops displaying normally (bold text - bold, for example, doubles, various artifacts may also appear, for example, in the form of lines, jagged text). In order to fix the situation, for IE you need to set the background color, the CSS property background-color, the element to which the transparency is applied. Fortunately, IE7 has fixed the bug.

Create transparent background in HTML and CSS (opacity and RGBA effects)

Translucency effect element is clearly visible in the background image and has become widespread in different operating systems, because it looks stylish and beautiful. The main thing is not to have a monochromatic pattern under the translucent blocks, but an image, it is in this case that the transparency becomes noticeable.

This effect is achieved in a variety of ways, including old-fashioned techniques like using a PNG image as a background, creating a checkered image, and opacity. But as soon as it becomes necessary to make a translucent background in a block, these methods have unpleasant downsides.

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

The main feature of this property is that the transparency value affects all children inside, not just the background. This means that both the background and the text will become translucent. You can increase the transparency level by changing the opacity command from 0.1 to 1.

HTML 5 CSS 3 IE 9

Creation and promotion of sites on the Internet

In web design, partial transparency is also applied and achieved through the RGBA color format, which is set only for the background of an element.

Typically, in designs, only the background of an element should be translucent, and the text should be opaque to maintain readability. The opacity property is inappropriate here because the text inside the element will also be partially transparent. It is best to use the RGBA format, of which the alpha channel is a part, or in other words the transparency value. The value is written rgba, then the values ​​of the red, blue and green color components are listed in brackets, separated by commas. The last is transparency, which is set from 0 to 1, with 0 being full transparency and 1 being the opaque color for the rgba syntax.

Translucent background HTML 5 CSS 3 IE 9

Creation and promotion of sites on the Internet.

Background Opacity is set to 90% - Semi-transparent background and opaque text.