home - Antiviruses
CSS transparency is a cross-browser solution. CSS opacity property: managing transparency How to make it work in all browsers

Sometimes there is a need to make a transparent background for a certain block on the page. This effect can be achieved by creating a transparent background image in *.png format and setting it through the background property: url(“./images/fon.png”); .

Using the OPACITY property

Why such complexity if it can be done with using CSS. Let's create a main block (page) and a nested block (block) on the page, to which we will set transparency. Cross-browser compatibility is achieved as follows: property for Internet Explorer– filter:alpha(opacity=50) ( transparency value ranging from 0 to 100), for browsers that support the CSS3 standard – opacity:0.5 ( number ranging from 0.0 to 1.0).

HTML code:

Semi-transparent element div.page ( margin:0 auto; width:450px; height:300px; background:url(../images/3a0fdf3dc1.jpg) no-repeat; border:2px solid #555555 ) div.block ( width:260px ; height:140px; margin-left:94px; border:1px solid #333333; */ opacity:0.5 ) div.block p ( margin:47px 0 0 10px; font-weight:bold; color:#000000; text-align: center; )

Transparent background for the block.

Result :

Transparent background for the block

As you noticed, transparency applies to all child elements

Transparent background for the block

in DIVs with class block and they cannot exceed the transparency value of their parent. That is, everything that is in this block becomes transparent. What to do if you need to leave a transparent background only for the div?

Using the BACKGROUND-COLOR property

We need to make some changes to the CSS style sheet, namely, replace the opacity property for the DIV with the block class with the background-color property.

Div.block ( width:260px; height:140px; margin-top:79px; margin-left:94px; border:1px solid #333333; /* transparent background only DIV.block */ background-color: rgba(255, 255 , 255, 0.5); /* Background color, transparency 0.5*/ )

Result :

Transparent background for the block

In the above example it is used for color and background RGBA format. Where, the first three letters stand for red, green, blue (red, green, blue), the last symbolizes the alpha channel (a) and specifies transparency b element from 0.0 before 1.0 .

Background-color: rgba(r, g, b, a);

The value of the color component is placed in parentheses instead of letters; it can be viewed in any graphic editor, for example Paint.Net (screenshot). The last value of a sets the transparency and is the same as the value of the opacity property.

http://cp77.comxa.com/verstka/css-transparent-fon

The opacity CSS property sets the opacity of an element. Opacity is the degree to which content is hidden behind an element, and is the opposite of transparency.

The source for this interactive example is stored in a GitHub repository. If you"d like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

opacity applies to the element as a whole, including its content, even if the value is not inherited by child elements. This way, the element and its children have the same opacity relative to the element's background, even if they have different opacity relative to each other.

Using opacity with a value other than 1 places the element in a new overlay context.

Examples Basic example div ( background-color: yellow; ) .light ( opacity: 0.2; /* Text is barely visible against the background */ ) .medium ( opacity: 0.5; /* Text is more visible against the background */ ) .heavy ( opacity: 0.9; /* The visibility of the text is very clear against the background */ ) You can barely see this. This is easier to see. This is very easy to see. Different opacity with:hover img.opacity ( opacity: 1; filter: alpha(opacity=100); /* IE8 and below */ zoom: 1; /* "hasLayout" triggers in IE 7 and below */ ) img.opacity :hover ( opacity: 0..png" alt="MDN logo" width="128" height="146" class="opacity"> Проблемы доступности !}

If text opacity is adjusted, it is important to ensure that the contrast ratio between the color of the text and the background on which the text is placed is high enough so that people with low vision can read the contents of the page.

The color contrast ratio is determined by comparing the brightness of the text with the adjusted opacity and background color value. To comply with current Web Content Accessibility Guidelines (WCAG), text content requires a ratio of 4.5:1 and 3:1 for larger text such as headings. Large text is defined as 18.66px or larger, or 24px or larger.

Specifications Initial value It applies to Inherited Display Processing the value Animation type Canonical order
1.0
all elements
No
visual
the specified value is trimmed to the range
number
unique ambiguous order defined by formal grammar
Browser support

The compatibility table on this page is generated from structured data. If you"d like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

Update compatibility data on GitHub

Computers Mobile Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internetopacity Support for percentage opacity values
Chrome Full support 1Edge Full 12 supportFirefox Full support 1 Full support 1 No support 1 - 3.5

With prefix

With prefix Requires vendor prefix: -moz-		IE Full support 9Opera Full support 9Safari Full support 2 Full support 2 No support 1.1 - 2

With prefix

With prefix Requires vendor prefix: -khtml-		WebView Android Full support 1Chrome Android Full support 18Firefox Android Full 4 supportOpera Android Full support 10.1Safari iOS Full support 1Samsung Internet Android Full support Yes
Chrome Full support 78Edge No support NoFirefox Full support 70IE No support NoOpera No support NoSafari No support NoWebView Android Full support 78Chrome Android Full 78 supportFirefox Android No support NoOpera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
Legend Full support Full support No support No support Requires a vendor prefix or other name to use. Requires a vendor prefix or other name to use.

Good day, web development geeks, as well as newbies. For those who do not follow IT trends, or rather web fashion, I would like to solemnly inform you that this publication is on the topic: “How to make a transparent block css tools» just in time for you. Indeed, in the current 2016, the introduction of various transparent objects into online services is considered a stylish move.

Therefore, in this article I will tell you about all existing methods of creating transparency, starting from antediluvian solutions, I will focus on the compatibility of solutions with browsers, and also give specific examples program code. Now let's get to work!

Method 1. Antediluvian

When were there still weak computers and “abilities” are not developed, developers came up with their own way of creating transparent background: Use transparent pixels alternately with colored pixels. The block created in this way looked like a chessboard when scaled, but at normal size it resembled some kind of transparency.

This, in my opinion, “crutch” certainly helps out in older versions of browsers in which modern solutions do not work. But it is worth noting that the quality of display of text entered into such a format drops sharply.

Method 2. Not bothered

In rare cases, developers solve the problem of introducing a translucent image by inserting... a ready-made translucent image! For this purpose, images saved in PNG-24 format are used. The graphic format allows you to set 256 levels of translucency.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 Example 1 BODY ( background: url(http://i75.mindmix.ru/50/90/349050/42/6073342/hhhttttttttt.png); background-size:100%; ) div ( width: 65%; text- align:center; margin-top: 35px; margin-left: 15%; The text in the image is in png format.

However, this method is not convenient for several reasons:

  • Internet Explorer 6 does not work with this technology; you need to write script code for it;
  • You can't change background colors in css;
  • If the browser's image display function is disabled, it will disappear.
    • Method 3. Promoted

    The most common and well-known way to make a block transparent is the opacity property.

    The parameter value varies in the range, where at 0 the object is invisible, and at 1 it is fully visible. However, there are some unpleasant moments here too.

    First, all child elements inherit transparency. This means that the entered text will also “shine through” along with the background.

    Secondly, Internet Explorer again “turns up its nose” and, up to version 8, does not function with opacity.

    To solve this problem, use filter: alpha (Opacity=value) .

    Let's look at an example.

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 Example 2 BODY ( background: url(http://www.uarating.com/news/wp-content/uploads/2016/05/flowers-04-may-2016.jpg) no-repeat; background-size:100% ; ) div ( background: #FFEFD5; opacity: 0.88; filter: alpha(Opacity=88); padding: 25px; text-align:center; ) In our store you will find all kinds of colors.

    Method 4. Modern

    Today, professionals use the rgba (r, g, b, a) tool.

    Before that, I told you that RGB is one of the popular color models, where R is responsible for all shades of red, G – shades of green and B – shades of blue.

    In case of css parameter variable A is responsible for the alpha channel, which in turn is responsible for transparency.

    The main advantage of the latter method is that the alpha channel does not affect objects located inside the stylized block.

    rgba(r, g, b, a) is supported starting from:

    • Opera version 10;
    • Internet Explorer 9;
    • Safari 3.2;
    • 3 versions of Firefox.

    I want to note interesting fact! The beloved Internet Explorer 7 throws an error when combining the background-color property with the name of the colors (background-color: gold). Therefore, you should only use:

    background-color: rgba (255, 215, 0, 0.15)

    And now an example.

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 Example 3 BODY ( background: url(http://www.uarating.com/news/wp-content/uploads/2016/05/flowers-04-may-2016.jpg) no-repeat; background-size:100% ; ) .block( background-color: rgba(255, 228, 196, 0.88); padding: 25px; text-align:center; ) In our store you will find all kinds of colors.

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

    This concludes the publication. Subscribe to my blog and don't forget to invite friends. I wish you good luck in learning web languages! Bye bye!

    /* 06.07.2006 */

    CSS transparency (css opacity, javascript opacity)

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

    CSS opacity (CSS transparency) CSS opacity symbiosis

    By symbiosis I mean combining different styles to different browsers in one CSS rule to obtain the desired effect, i.e. to implement cross-browser compatibility.

    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 don’t make a difference, but they don’t really interfere either (decide for yourself whether you need them).

    Javascript opacity symbiosis

    Now let's try to set transparency through a 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 known functions of ways 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";

    One might wonder why not set transparency by assigning (=) to the property elem.style.filter = "..."; ? Why is "+=" used to append 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 in this way a second time, 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 a 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 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 IE4 short style, or the IE5.5+ style, which is taken into account in the code.

    Smoothly change the transparency of an element

    Ready solution. We use 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 rule name, start and end transparency, as well as an optional parameter delays affecting the speed of transparency change 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" />

    Basic steps:
  • We connect the library of functions;
  • We define the rules using the fadeOpacity.addRule() method;
  • We call the fadeOpacity() method to change the transparency from the initial value to the final value, or fadeOpacity.back() to return to the initial value of the transparency level.
    • Let's chew

    How to connect the library, I think, can be seen from the example above. Now it’s worth explaining the definition of the rules. Before calling the methods for smoothly changing transparency, you need to define the rules by which the process will be performed: you need to determine the initial and final transparency, and also, 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 through the methods fadeOpacity(sElemId, sRuleName), where sElemId is the id of the element, and sRuleName is the name of the rule. To return transparency to the initial state The fadeOpacity.back(sElemId) method is used.

    :hover to easily change transparency

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

    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 element A. The fact is that Internet Explorer up to version 6 understands the pseudo-selector:hover, only in relation to links, and not to any elements, as it should be in CSS (the situation has been corrected in IE7) .

    Transparency and jagged text in IE

    With the release of Windows XP, screen font smoothing using the ClearType method 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 when the ClearType anti-aliasing method is enabled, then the text ceases to be displayed normally (bold text, for example, doubles, various artifacts may also appear, for example, in the form of dashes, jagged text). In order to correct the situation, for IE you need to set the background color, CSS property background-color , to the element to which transparency is applied. Fortunately, the bug has been fixed in IE7.

    To create a transparent effect in CSS, the opacity property is used.

    IE8 and earlier versions support an alternative property - filter:alpha(opacity=x) , where " x " can range 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 a number from 0.0 to 1.0 as a value, the lower the value, the more transparent the element will be:

    Document name .myClass ( float: left; margin-right: 5px; opacity: 0.4; filter: alpha(opacity=40); /*for IE8 and earlier*/ ) Try »

    Transparency on hover

    Pseudo-class:hover allows you to change appearance elements when you hover the mouse cursor over them. We'll use this feature to make the image lose its transparency when hovered over:

    Document title img ( float: left; margin-right: 5px; opacity: 0.4; filter: alpha(opacity=40); /*for IE8 and earlier*/ ) img:hover ( opacity: 1.0; filter: alpha( opacity=100); Try »

    Background transparency

    There are two possible ways make the 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 hue by mixing red, green and blue. For example, to set the text color to yellow, you can use any of the following declarations:

    Color: rgb(255,255,0); color: rgb(100%,100%,0);

    Colors specified using RGB will differ from the hexadecimal values ​​we used previously in that they allow the use of an alpha transparency channel. This means that through the background of an element with alpha transparency, what is located under it will be visible.

    Declaring an RGBA color is similar in syntax to the standard RGB rules. However, we will also need to declare the value as RGBA (instead of RGB) and specify an additional decimal transparency value after the color value between 0.0 (fully transparent) and 1 (fully opaque).

    Color: rgba(255,255,0,0.5); color: rgba(100%,100%,0,0.5);

    The difference between the opacity property and the RGBA property is that the opacity property applies transparency to the entire element, meaning that the entire content of the element becomes transparent. And RGBA allows you to set transparency to individual parts of an element (for example, just 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 ) Try »

    Note: RGBA values ​​are not supported in IE8 and above earlier versions. To declare a fallback color for older browsers that don't support alpha color values, you should specify it first before the RGBA value: background: rgb(255,255,0); background: rgba(255,255,0,0.5);
     

    Read:



    Armenian satellite channels Armenian channels on hotbird

    Armenian satellite channels Armenian channels on hotbird

    Today let’s abstract a little from Tricolor, NTV Plus and pay television in general. There are many satellites that produce...

    BIT: Commercial Service Management The sequence of installation steps should be approximately as follows

    BIT: Commercial Service Management The sequence of installation steps should be approximately as follows

    To install SLK version 2.1.6.420, perform the following steps: 1. Download the distribution kit of the licensing system 3.0 and unzip it to any folder: 2....

    How to pass a polygraph? Polygraph questions. How to fool a polygraph. Lie detector: what is it, where and why is it used? Lie detector as it is also called

    How to pass a polygraph? Polygraph questions. How to fool a polygraph. Lie detector: what is it, where and why is it used? Lie detector as it is also called

    History The first practical experience of using such tools to detect lies belongs to the famous Italian criminologist Cesare...

    Working with email: effective rules Rules for working with email

    Working with email: effective rules Rules for working with email

    Many novice webmasters mistakenly believe that after creating a website, it should automatically immediately appear in search engines. And very...