CSS property opacity: transparency control. CSS opacity property: transparency control How to make an element transparent and remove CSS transparency

Note that the block's text content is fully visible (100% black), while the background is set to an alpha channel of 0.88, i.e. 88%.

This post has come to an end. Subscribe to my blog and don't forget to invite your friends. Good luck with learning web languages! Bye bye!

/* 06.07.2006 */

The transparency effect 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 (the same work in different browsers) taking into account Firefox, Internet Explorer, Opera, Safari, Konqueror browsers, then you are welcome. In addition, consider a ready-made solution for gradually changing transparency using javascript.

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 necessary, for IE5.5+ and browsers that understand CSS3 opacity, and the two rules in the middle obviously don’t make any difference, but don’t really interfere either (decide for yourself whether you need them).

Now let's try to set the transparency through the script, taking into account the features 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 either one of the methods known to the function for controlling 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 - element id, nOpacity - a real number from 0.0 to 1.0 that specifies transparency in the CSS3 opacity style.

I think it's worth explaining the IE part of the setElementOpacity function code.

VaroAlpha = 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 property elem.style.filter = "..."; ? Why use "+=" to add the filter property to the end of the string? The answer is simple, in order not to "overwrite" other filters. But at the same time, if you add a filter 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 set, then you need to manipulate it through the collection of filters applied to the element: elem.filters (but note that if the filter has not yet been assigned to the element, then it is impossible to manage it through this collection). Collection elements can be accessed either by filter name or by index. However, the filter can be specified in two styles, the short IE4 style, or the IE5.5+ style, which is taken into account in the code.

Ready solution. Using the opacity.js library

img ( filter:alpha(opacity=30); -moz-opacity: 0.3; -khtml-opacity: 0.3; opacity: 0.3; ) // Create a rule for changing transparency: set the name of the rule, start and end transparency, and an optional parameter delays affecting the speed of changing transparency fadeOpacity.addRule("oR1", .3, 1, 30); 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" />

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 methods for smoothly changing transparency, you need to define the rules by which the process will be performed: you need to define the initial and final transparency, and, if desired, specify a delay parameter that affects the speed of the process of changing transparency.

Rules are defined using the fadeOpacity.addRule method

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

Arguments:

• sRuleName - rule name, set arbitrarily;
• nStartOpacity and nFinishOpacity - start and end transparency, numbers in the range from 0.0 to 1.0 ;
• nDelay - delay in milliseconds (optional argument, default is 30).

We call the transparency fading itself using 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.

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

a:hover img ( filter:progid:DXImageTransform.Microsoft.Alpha(opacity=30); -moz-opacity: 0.3; -khtml-opacity: 0.3; opacity: 0.3; )

Please note that the image is placed inside the A element. The fact is that Internet Explorer, up to version 6, understands the :hover pseudo-selector, only in relation to links, and not to any elements, as it should be in CSS (in IE7 the situation has been corrected) .

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

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

Numerical value for opacity is given 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. Keep in mind that opacity applies 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.

Transparency via CSS Opacity

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;
}

The RGBA color format is a more modern alternative to the opacity property. 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 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 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 Internet Explorer browser, then add the filter property and do not forget to comment out so that the validity of the code does not suffer.

.blue(
background: rgba(0, 120, 201, 0.3);
filter: alpha(Opacity=30); /* Transparency in IE */
}

The RGBA format is supported by all modern browsers, with the exception of Internet Explorer. It is also very important that RGBA is flexible, it only affects a specific given element, without affecting its children. It is clear that it is more convenient for the coder. My choice is definitely in favor of the RGBA format for getting transparency in CSS.

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

The element's translucency effect 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 to have not a monochromatic pattern under the translucent blocks, but an image, in this case the transparency becomes noticeable.

This effect is achieved in a variety of ways, including old-fashioned techniques such as using a PNG image as a background, creating a checkered image, and using the opacity property. But as soon as it becomes necessary to make a translucent background in the 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 child elements 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 opacity body ( background: url(images/cat.jpg); ) div ( opacity: 0.6; background: #fc0; /* Background color */ padding: 5px; /* Padding around text */ ) Creation and promotion of sites on the Internet

In web design, partial transparency is also used and achieved through the RGBA color format, which is set only for the element's background.

Typically in a design, only the background of an element should be translucent, and the text should be opaque to keep it readable. The opacity property doesn't fit 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, or in other words the transparency value, is a part. The value is written rgba, then the values ​​of the red, blue and green components of the color are listed in brackets separated by commas. Last comes transparency, which is set from 0 to 1, with 0 being fully transparent and 1 being opaque, the syntax for applying rgba.

Semi-transparent background HTML 5 CSS 3 IE 9 rgba body ( background: url(images/cat.jpg); ) div ( background: rgba(0, 170, 238, 0.4); /* Background color */ color: #fff; / * Text color */ padding: 5px; /* Margins around the text */ ) Creation and promotion of sites on the Internet. The opacity value for the background is set to 90% - a translucent background and opaque text.

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.

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:

Transparency .im ( filter: alpha(Opacity=50); -moz-opacity: 0.5; -khtml-opacity: 0.5; opacity: 0.5; )

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 is supported by the following browsers Mozilla 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.

As of Firefox 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 */

Let's look at some examples of setting transparency to certain elements that 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%.

Transparency .im1 ( filter: alpha(Opacity=50); -moz-opacity: 0.5; -khtml-opacity: 0.5; opacity: 0.5; ) .im2 ( filter: alpha(Opacity=30); -moz-opacity: 0.3 ; -khtml-opacity: 0.3; opacity: 0.3; )

Result:

Transparency in CSS when hovering over an image.

It is often necessary to make a picture or any other element transparent at the moment when the cursor is hovered over it. This can be done using the :hover CSS pseudo-class. 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.

Transparency .im1 ( filter: alpha(Opacity=100); -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; ).im1:hover ( filter: alpha(Opacity=50); -moz-opacity : 0.5; -khtml-opacity: 0.5; opacity: 0.5; ) .im2 ( filter: alpha(Opacity=30); -moz-opacity: 0.3; -khtml-opacity: 0.3; opacity: 0.3; ) .im2:hover ( filter: alpha(Opacity=100); -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; )

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:

Transparency BODY ( background: url(bg.png); /* Background image */ ) .blok ( background: #FC0; /* Background color */ padding: 5px; /* Padding */ color: #000000; /* Text color */ filter: alpha(Opacity=50); -moz-opacity: 0.5; -khtml-opacity: 0.5; opacity: 0.5; ) Text

Here is the result of the above code:

Background in CSS (color, position, image, repeat, attachment) - everything to set the background color or background image of Html elements

Basic HTML text formatting tags - highlighting text in bold and italics; size, color and font options; paragraph and heading tags

how to make a line with html and css how to make a divider line in html

What is dom in javascript

• Flash drives
• General
• HDD
• Miscellaneous
• Windows

• Apple
• Android
• Browsers
• Flash drives

• Google Drive (Google Cloud)
• Google Drive (Google Cloud)
• How to make a hidden folder visible How to make a hidden folder visible by changing its properties
• Production of modern processors

Contacts

Computer help Olympus

© 2023. olympsb.ru. Computer help Olympus.