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

Using the OPACITY property

Why so much complexity when it can be done with CSS. Let's create a main block on the page ( page) and nested block ( block), which we will set transparency. Cross-browser compatibility is achieved as follows: property for Internet Explorer - filter: alpha (opacity \u003d 50) (transparency value in the range from 0 to 100), for browsers supporting CSS3 standard - opacity: 0.5 (a number ranging from 0.0 to 1.0).

HTML code:

Result:

Transparent background for the block

As you can see, transparency extends to all children.

Transparent background for the block

in DIV with class block and they cannot exceed their parent's transparency value. That is, everything in this block becomes transparent. What if you want to leave the transparent background only for the div?

Using the BACKGROUND-COLOR property

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

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 used for color and background rGBA format ... Where, the first three letters stand for red, green, blue (red, green, blue), the latter symbolizes alpha channel (a) and sets transparencyb element from 0.0 before 1.0 .

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

The value of the color component is put in brackets instead of letters, it can be viewed in any graphical editor, for example Paint.Net (screenshot). The last value a sets transparency and matches the property value opacity.

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

CSS property opacity sets the opacity of the element. Opacity is the degree to which content is hidden behind an element, as opposed to 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 children. Thus, an element and its descendants 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 of

Basic example

div (background-color: yellow;) .light (opacity: 0.2; / * Barely visible text on background * /) .medium (opacity: 0.5; / * Text is more visible on background * /) .heavy (opacity: 0.9 ; / * The text is very clear on the background * /)

Different opacity with: hover

img.opacity (opacity: 1; filter: alpha (opacity \u003d 100); / * IE8 and below * / zoom: 1; / * "hasLayout" triggers in IE 7 and below * /) img.opacity: hover (opacity: 0..png "alt \u003d" (! LANG: MDN logo" width="128" height="146" class="opacity"> !}

Accessibility issues

If the opacity of the text is adjustable, it is important to make sure that the contrast ratio between the color of the text and the background the text is placed on is high enough so that people with low vision can read the page content.

The color contrast ratio is determined by comparing the brightness of the text with the adjusted opacity and the background color value. To comply with the current Web Content Accessibility Guidelines (WCAG), textual 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	1.0
It applies to	all elements
Inherited	not
Display	visual
Value handling	specified value, cropped to range
Animation type	are interpolated as floating point numbers. "\u003e number
Canonical order	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 Internet
opacity	Chrome Full support 1	Edge Full support 12	Firefox Full support 1 Full support 1 No support 1 - 3.5 With prefix With prefix Requires vendor prefix: -moz-	IE Full support 9	Opera Full support 9	Safari Full support 2 Full support 2 No support 1.1 - 2 With prefix With prefix Requires vendor prefix: -khtml-	WebView Android Full support 1	Chrome Android Full support 18	Firefox Android Full support 4	Opera Android Full support 10.1	Safari iOS Full support 1	Samsung Internet Android Full support Yes
Support for percentage opacity values	Chrome Full support 78	Edge No support No	Firefox Full support 70	IE No support No	Opera No support No	Safari No support No	WebView Android Full support 78	Chrome Android Full support 78	Firefox Android No support No	Opera Android No support No	Safari iOS No support No	Samsung Internet Android No support No

Legend

Full support Full support No support No support Requires vendor prefix or other name to use. Requires vendor prefix or other name to use.

CSS 3 property opacity allows you to make one or another element of the site transparent.

The transparency of an element is determined by a value from 0 before 1 Where 0 - completely transparent a 1 - opaque at all .. So for example the value 0.5 properties opacity applied to the image will mean that this image should be semi-transparent.

Transparency in IE

Internet Explorer browser does not support properties opacity up to the ninth version, however, it has its own filter with which you can set the degree of transparency:

filter: alpha (opacity \u003d 50)

Value opacity for Internet Explorer browser filter can vary from 0 - completely transparent to 100 - opaque

Blocks of this menu on hover will be semi-transparent in IE too !!

home
Site Map
Buy an elephant
Sell \u200b\u200ban elephant
Hire an elephant

Prefixes.

This could, in principle, end the chapter on transparency, but I would like to tell you more about the so-called vendor prefixes.. these comrades do not have much to do with this chapter, however, further in the course of learning CSS3, they will occur more and more often and somewhere you need to talk about them - so I'll tell you here.

So, vendor prefixes are special prefixes to CSS properties used by browsers for experimental properties that are not officially part of the CSS specification.

We remember that the CSS 3 specification is still under development and formally the properties described in this tutorial do not exist in nature, but browsers are already actively using them at their own peril and risk.

Why at your own peril and risk? Yes, because there is a possibility that when the CSS 3 specification is officially approved, the properties described in it will differ in their action from the properties with the same name that are already used by browsers. Well, here's the brand, let's say the developers of the CSS 3 specification designate a property opacity not as the degree of transparency of the block, but for example as its shading or flickering (of course I'm writing nonsense), which then will be displayed by millions of installed browsers for which opacity is it transparency !?

Or let's say the browser developers have come up with their own property - an innovation that no one else and nowhere has, but a document with such a property does not pass the validation check because there is no such property in the specification.

For these and other reasons, browsers use prefixes at the beginning of properties that are not part of the official specification. Each browser has its own prefix starting with the "-" sign, this sign at the beginning of the property, as well as this sign "_", according to the CSS 2.1 specification, means that the property is reserved for CSS extensions of certain browsers.

Here are the most popular browsers and their prefixes:

Browser	Prefix
Opera	-o-
Firefox, SeaMonkey, Camino	-moz-
Internet Explorer 8 and above	-ms-
Safari up to version 3, Konqueror	-khtml-
Safari 3 and higher, Google Chrome	-webkit-

It is very easy to use prefixes, it is enough to take some CSS property and substitute the required prefix for it, for example, to a property opacity substitute -moz- it turns out: -moz-opacity

Although in fact my expression “ use prefixes"Is wrong! in fact, nothing is substituted anywhere, just a property opacity , is there -moz-opacity and these are two different properties that do not have to perform the same function !! - this should be understood ..

And it should also be understood that certain specific browsers up to certain versions can support CSS properties only with their own prefixes (again, I am incorrectly expressing my own properties - browser CSS extensions), or they can initially rely on even developed specifications. - We will consider each case separately in this tutorial.

As for this chapter on transparency, it should be noted that Firefox 3.5 and earlier use their own property -moz-opacity , and the Safari browser before version 1.1 uses its property -khtml-opacity .

So in order to make our example fully cross-browser, we need to add a couple more lines to the code:

As you can see, prefixes significantly stretch the code and their use is not always justified if the versions of browsers that want to work with certain properties only using their prefixes are old enough, as is the case with the property opacity , then you can not specify them .. - although of course this is bad advice ..

Now for some useful tips ..

Always use prefixes (unless, of course, a particular browser cannot do without them) in cases where the property used can greatly affect the performance, readability and usability of the site. It is one thing when some little things in the design of the site will not work and it is completely different when, for example, the site menu does not work or it is impossible to read the text on the site due to the fact that the browser does not support some property and instead uses its own similar one.

/* 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 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 \u003d 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 \u003d getOpacityProperty (); var elem \u003d 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 \u003d\u003d "filter") // Internet Exploder 5.5+ (nOpacity * \u003d 100; // If transparency is already set, then change it through the filters collection, otherwise add transparency through style.filter var oAlpha \u003d elem.filters ["DXImageTransform.Microsoft.alpha"] || elem.filters.alpha; if (oAlpha) oAlpha.opacity \u003d nOpacity; else elem.style.filter + \u003d "progid: DXImageTransform.Microsoft.Alpha (opacity \u003d" + nOpacity + ")"; // In order not to overwrite other filters, use "+ \u003d" ) else // Other browsers elem.style \u003d nOpacity; ) function getOpacityProperty () (if (typeof document.body.style.opacity \u003d\u003d "string") // CSS3 compliant (Moz 1.7+, Safari 1.2+, Opera 9) return "opacity"; else if (typeof document.body.style.MozOpacity \u003d\u003d "string") // Mozilla 1.6 and earlier, Firefox 0.8 return "MozOpacity"; else if (typeof document.body.style.KhtmlOpacity \u003d\u003d "string") // Konqueror 3.1, Safari 1.1 return "KhtmlOpacity"; else if (document.body.filters && navigator.appVersion.match (/ MSIE ([\\ d.] +); /)\u003e \u003d 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 real number from 0.0 to 1.0 specifying the CSS3 opacity.

I think it's worth clarifying the IE-related part of the setElementOpacity function.

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

The question may arise, why not set transparency by assigning (\u003d) to the elem.style.filter \u003d "..." property; ? Why use "+ \u003d" 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 \u200b\u200bof 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 that 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

Ready-made solution. Using the opacity.js library

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

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 methods for smoothly changing transparency, you need to define the rules by which the process will be executed: you need to define the initial and final transparency, and also, if desired, specify the 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. The fadeOpacity.back (sElemId) method is used to return transparency to its original state.

: 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 the A element. 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, screen font smoothing appeared using the method ClearTypeand 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-colorthe element to which transparency is applied. Fortunately, IE7 has fixed the bug.

Good day, web development geeks, as well as her newbies. For those who do not follow the trends of the IT-field, or rather the web fashion, I want to solemnly inform that this publication on the topic: "How to make a transparent block with css tools" is just the way 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 the existing methods of creating transparency, starting from antediluvian solutions, I will focus on the compatibility of solutions with browsers, and also give specific examples of program code. Now get to work!

Method 1. Antediluvian

When computers were still weak and "abilities" were not developed, developers came up with their own way of creating a transparent background: using transparent pixels in turn with colored ones. Thus, the created block looked like a checkerboard when scaled, but in its normal size it looked like a kind of transparency.

This, in my opinion, "crutch" of course helps out in old versions of browsers in which modern solutions do not work. But it should be noted that the quality of the display of the text , inscribed in such, falls sharply.

Method 2. Not confused

In rare cases, developers solve the problem with the introduction of a semi-transparent picture by inserting ... a ready-made semi-transparent picture! For this, images saved in PNG-24 format are used. This 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

However, this method is not convenient for several reasons:

1. Internet Explorer 6 does not work with this technology, you need to write scripting code for it;
2. You cannot modify the background colors in css;
3. If the function of displaying images is disabled in the browser, it will disappear.

Method 3. Proprietary

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

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

First, all children inherit transparency. This means that the inscribed 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 \u003d 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

Method 4. Modern

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

Before that, I said 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 the case of the css parameter, the 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 inside the styled block.

rgba (r, g, b, a) is supported since:

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

I want to point out an interesting fact! Beloved Internet Explorer 7 throws an error when combining a property background-color with the name of the colors (background-color: gold). Therefore, it is worth using only:

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

Now for 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

You will find all kinds of flowers in our store.

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 your friends. Good luck learning web languages! Bye Bye!