The element's translucency effect is clearly visible in the background image and has become widespread in various operating systems because it looks stylish and beautiful. In web design, translucency is also used and achieved through opacity properties or the RGBA color format that is set for the background.
opacity property
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 and it will not work to increase the transparency level by adding . In table. 1 shows the appearance of text and background with different opacity values.
Example 1 shows how to create a translucent box using opacity .
Example 1: Background on a web page
HTML5 CSS3 IE 9+ Cr Op Sa Fx
RGBA
Usually, by design, only the background of the element should be translucent, and the text should be opaque to preserve its readability. 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 parentheses separated by commas. Last comes transparency, which is set from 0 to 1 (Fig. 1), while 0 means full transparency, and 1 means opacity of the color.
Rice. 1. Syntax of using rgba
Example 2 shows the use of the RGBA format to create a translucent background.
Example 2: Semi-transparent background
HTML5 CSS3 IE 9+ Cr Op Sa Fx
The result of this example is shown in Fig. 2. Opacity value for the background is set to 90%.
Rice. 2. Semi-transparent background and opaque text
Creating a transparent background in HTML and CSS (opacity and RGBA effects)
translucency effect The 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 pattern under the translucent blocks, but an image, in this case the transparency becomes noticeable.
This effect is achieved different ways, including old-fashioned techniques like using a PNG image as a background, making 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
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
Good day, web development geeks, as well as its newbies. For those who do not follow the trends in the IT field, or rather web fashion, I want to solemnly announce that this publication is on the topic: “How to make a transparent css block 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 ways creating transparency, starting from antediluvian solutions, I will focus on the compatibility of solutions with browsers, and also give concrete examples program code. And now to work!
Method 1. Antediluvian
When were there weak computers and "ability" is not developed, developers have come up with their own way of creating a transparent background: the use of transparent pixels in turn with color ones. The block created in this way looked like a checkerboard when scaled, but in normal size it resembled some kind of transparency.
This, in my opinion, "crutch" of course helps out in older versions of browsers in which modern solutions do not work. But it is worth noting that the quality of text display , inscribed in such , falls sharply.
Method 2. Not confused
In rare cases, developers solve the problem with the introduction of a translucent image by inserting ... an already finished translucent image! 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:
- 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 image display function is disabled in the browser, it will disappear.
Method 3. Promoted
The most common and well-known way to make a block transparent is the property opacity.
The value of the parameter varies in the range , where at 0 the object is invisible, and at 1 it is fully displayed. However, here there are some unpleasant moments.
First, all child elements inherit transparency. And this means that the inscribed text will also “shine through” along with the background.
Secondly, Internet Explorer turns up its nose again and up to version 8 does not function with opacity.
To solve this problem, use filter:alpha (Opacity=value).
Consider 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.
Main advantage the last way- 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 note 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, 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 text content block is completely 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!
Vlad Merzhevich
Partial transparency, when used correctly, looks very impressive in website design. The main thing is that under the translucent blocks there should be not a single-color pattern, but an image, in this case the transparency becomes noticeable. This effect is achieved in many ways, and if you remember everything, including old-fashioned methods, then this is using a PNG image as a background, creating a checkered image, and the opacity property. But as soon as it becomes necessary to make a translucent background in the block, these methods have an unpleasant downside. I will make a short review so that it becomes clear what is at stake, as well as for those readers who are not familiar with non-traditional options for creating a translucency effect.
PNG as background
AT graphics editor a single-color translucent drawing is preliminarily prepared, which is saved in PNG-24 format (Fig. 1). A feature of this format is the support for 256 levels of transparency, or simply speaking, it can display translucent pictures.
Rice. 1. Image to create a background
Then we add an image as a background through the background property, as shown in example 1.
Example 1: Using a translucent pattern
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
The result of this example is shown in Fig. 3.
Rice. 2. Applying a wallpaper
The legacy Internet Explorer 6 browser does not work with translucency in PNG-24, if for some reason you need to support this browser, you will have to use scripts for it.
The presented method has a number of limitations. So, when you turn off images in the browser, the background will disappear altogether. In addition, it is not so easy to change the background color and the transparency value, for this you will have to edit the image again.
checkered image
This method belongs to the ancient ways of implementing translucency, when browsers “couldn’t do anything”, and you had to look for non-template solutions. The trick is to create an image that alternates between transparent and opaque pixels (Figure 3). Such a regular structure creates the effect of translucency, essentially imitating it.
Rice. 3. Enlarged checkered pattern
Here's what it looks like in the end (Fig. 4).
Rice. 4. Imitation of translucency
The disadvantages of this method are comparable to the previous one, moire patterns can also occur and text degradation occurs.
opacity property
The CSS 3 opacity property sets the transparency value and ranges from 0 to 1, where zero is the full transparency of the element, and one, on the contrary, is opacity. The opacity property has a feature - the transparency is distributed to all child elements, and they cannot exceed the transparency value of their parent. It turns out that there can be no opaque text on a translucent background (example 2).
Example 2: Using opacity
XHTML 1.0 CSS 2.1 CSS 3 IE Cr Op Sa Fx
The result of the example is shown in Fig. 5.
Rice. 5. Translucency of text and background
In Internet Explorer up to and including version 8.0, opacity does not work, so the browser-specific filter property is used for it. Naturally, it results in invalid CSS code.
RGBA
The modern approach is much simpler and more visual than the above methods and consists of using the RGBA format for color and background. The first three letters are familiar to many and stand for red, green, blue (red, green, blue), the last symbolizes the alpha channel and sets the transparency of the element. The record format is this.
background-color: rgba(r, g, b, a);
In brackets, instead of letters, the value of the color component is put, it can be viewed in any graphic editor, the last value sets transparency and matches the value of the opacity property.
Not all browsers support this format: Internet Explorer since version 9, Opera since version 10, Firefox since 3, Safari since 3.2. But in general, modern browsers display transparency correctly. For older versions of IE, you can separately specify the color in its usual format, while, of course, there will be no transparency. Or use the filter property again, but then you have to put up with the fact that transparency will also affect the text (example 3). To comply valid code CSS, I used conditional comments.
Example 3: Using RGBA
HTML5 CSS3 IE Cr Op Sa Fx
The result of the example can be seen in Fig. 6.
Rice. 6. Semi-transparent background with opaque text
Compare the picture with the previous one, the letters have become brighter and clearer.
AT Internet browser Explorer 7 found a bug when combining background-color with different values. For example, if you set the background color to red, as shown below, then the background in IE7 will not be displayed at all.
Div ( background-color: red; /* Not applicable in IE7 */ background-color: rgba(255, 0, 0, 0.5); )
This is solved by replacing the background-color property with background .
Div ( background: red; /* And this works */ background: rgba(255, 0, 0, 0.5); ) However, there is one caveat. The CSS validator "swears" at background if you set it to RGBA format. But at the same time, it correctly applies to background-color . In general, as always, you have to choose between browsers and validity.
Description
Specifies the background color of an element. Although this property does not inherit the properties of its parent, because the initial value is set to transparent, the background color child elements matches the background color of the parent element.
Syntax
background color:<цвет>| transparent | inherit
Values
transparent Sets a transparent background. inherit Inherits the value of the parent.HTML5 CSS2.1 IE Cr Op Sa Fx
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
AT this example for web page elements, three various ways background color settings. The result of the example is shown in Fig. one.
Rice. 1. Apply background-color
Object Model
document.getElementById("elementID ").style.backgroundColor
Browsers
Internet Explorer up to version 7.0 does not support the inherit value.