The values in which range the opacity property accepts. How to make a layer semi-transparent? Differences between opacity and rgba
CSS property opacity sets the element's opacity. 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; /* Barely visible text on the background */ ) .medium ( opacity: 0.5; /* Text visibility is clearer on the background */ ) .heavy ( opacity: 0.9 ; /* Text visibility is very clear against the background */ )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"> !}Accessibility issues
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 | 1.0 |
|---|---|
| Applies to | all elements |
| Inherited | No |
| Display | visual |
| Processing the value | the specified value is trimmed to the range |
| Animation type | are interpolated as floating point real numbers.">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- | I.E. 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 a vendor prefix or other name to use. Requires a vendor prefix or other name to use.In this lesson we will look at such 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 transparency Opacity
Digital value for opacity set in the range from 0.0 to 1.0, where zero is complete 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 kept in mind that opacity propagates to all child elements of the parent. This means that text on a translucent background will also be translucent. And this is 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; /* Floor color transparent background */
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 recording color RGBA, is more modern alternative for property opacity. R (red), G (green), B (blue)- means: red, green, blue. Last letter A– means alpha channel, which sets transparency. RGBA unlike Opacity does not affect child elements.
Now let's look at our example using RGBA. Let's replace these lines in the 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.
Result of the RGBA example:
The second screenshot looks much better than the first.
By playing with the translucency of the background of the blocks, you can achieve on the site interesting effects. It is important that these translucent blocks go on top of a colorful design, such as a photograph. Only in this case the effect will be noticeable. This technique has long been used in design, even before the advent of any CSS3, it was implemented purely in graphic programs.
If the customer requires that the layout look good in older versions of the browser Internet Explorer, then add the property filter and don't forget to comment out so that the validity of the code is not affected.
Conclusion
Format RGBA support all modern browsers, except Internet Explorer. It is also very important that RGBA flexible, it acts only on a specific specified element, without affecting its children. It is clear that this is more convenient for the layout designer. My choice is definitely in favor of the format RGBA to receive transparency in CSS.
For better consolidation of the material and greater clarity, I suggest you go through.
Creating a transparent background in HTML and CSS (opacity and RGBA effects)
Translucent 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 to have not a monochromatic design under the translucent blocks, but an image; it is in this case that transparency becomes noticeable.
This effect is achieved in different ways, including old-fashioned techniques like using a PNG image as a background, creating a checkered image, and the opacity property. But as soon as the need arises to make a translucent background in a block, these methods have unpleasant downsides.
Let's look at 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 within it, not just the background. This means that both the background and text will become translucent. You can increase the level of transparency by changing the opacity command from 0.1 to 1.
HTML 5 CSS 3 IE 9
In web design, partial transparency is also used and is achieved through the RGBA color format, which is set only for the background of the element.
Typically in a design, only the background of an element should be translucent, and the text should be opaque to maintain readability. The opacity property is not suitable here because the text inside the element will also be partially transparent. It's best to use the RGBA format, which has an alpha channel, or in other words, a transparency value as part of it. The value is written rgba, then the values of the red, blue and green color components are listed in parentheses, separated by commas. The last is transparency, which is set from 0 to 1, with 0 meaning full transparency, and 1 color opacity - the syntax for using rgba.
Translucent background HTML 5 CSS 3 IE 9
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 on the topic: “How to make a transparent block with css tools” is just right 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 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 have come up with their own way of creating a transparent background: using transparent pixels in turn with colored ones. 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 text display quality , inscribed in such, falls 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. Given 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:
- 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 everyone known method make some block transparent is a property opacity.
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 |
|
Method 4. Modern
Today, professionals use the rgba (r, g, b, a) tool.
Previously, I told you that RGB is one of the popular color models, where R is responsible for all shades of red, G for shades of green and B for shades of blue.
In the case of the css parameter, the A variable is responsible for the alpha channel, which in turn is responsible for the transparency.
Main advantage last method– 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 properties background-color 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 |
In our store you will find all kinds of flowers.
|
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!
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:
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:
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) - color system, which 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 hexadecimal values, which we used before in that they allow us to use the alpha channel of transparency. 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);