With the advent of CSS3, the work of layout designers has in many ways become simpler and more logical: after all, now you can truly flexibly configure any object, resorting to JavaScript less and less. Let's say you need to adjust the transparency of the background - CSS immediately offers several options.

The background is specified by a set of attributes, background-repeat, background-attachment, background-origin, background-clip, background-color), and each of them can be specified separately or combined under the background attribute. Let's look at each of them in more detail.

background-color attribute

Even IE8 supports this method. Multiple images as background are used when rubber layout. The main thing is that when using any image, do not forget to also specify CSS color background, since users may simply not load the image.

background-position attribute

If you use an image to set the background of a block, CSS will allow you to position the image anywhere on the screen. By default, the image is located on the left top corner. The attribute accepts either verbal indications (top, bottom, left, right) or numerical ones (percentages, pixels and other units of measurement). In this case, you need to specify two values: horizontally and vertically:

body (background-position: right center;) - in this example, the background will be located on the right side of the page, and the distances from the bottom and top to the image are the same.

background-size attribute

Sometimes required with using CSS stretch the background or reduce its size. To do this, use the background-size attribute, and the background size can be set either in pixels or percentages, or in any other units of measurement.

There are some problems with this attribute: in order to display the background correctly in earlier versions of browsers, prefixes must be used. Certainly, current versions fully support this attribute and the need for specific properties has disappeared.

background-attachment attribute

This attribute specifies the behavior background image when scrolling. So, it can take 3 values ​​(not taking into account inherit, which is common to all attributes presented in this article):

• fixed— makes the picture motionless against the background;
• scroll— the background scrolls along with other elements;
• local— the background image scrolls if the content has scrolling. Background that extends beyond the content is fixed.

Usage example:

body (background-attachment fixed).

Firefox currently does not support the last property (local).

background-origin attribute

This attribute is responsible for the positioning of the element. Early browsers require prefixes. The property itself has three parameters:

• padding-box positions the background relative to the edge, taking into account the thickness of the frame;
• border-box differs from the previous property in that the border line can completely or partially overlap the background;
• content-box Positions the image, linking it to the content.

If multiple values ​​are specified, browsers may react differently: Firefox and Opera only accept the first option.

background-repeat attribute

As a rule, if the background is given by an image, it should be repeated horizontally or vertically. This is what the background-repeat attribute is used for. Thus, the background of a block whose CSS contains such a property can have one of several parameters:

• no-repeat— the image appears on the page in a single version;
• repeat— the background is repeated along the x and y axes;
• repeat-x- only horizontally;
• repeat-y- only vertically;
• space— the background is repeated, but if the space cannot be filled, then voids appear between the pictures;
• round— the image is scaled if it is not possible to fill the entire area with whole pictures.

Example of attribute usage:

body (background-repeat: no-repeat repeat)- similar background-repeat: repeat-y.

In CSS3, it is possible to set values ​​for multiple images if you list the parameters separated by commas.

background-clip attribute

This attribute defines the behavior of the background under borders (for example, in the case of dotted borders):

• padding-box— the background is displayed strictly inside the block;
• border-box- the image fits the frame;
• content-box— the picture in the background appears only inside the content.

Usage example:

body (background-clip: content-box;).

Chrom and Safari require the -webkit- prefix.

Opacity and filter attributes

The opacity attribute allows you to set the transparency of the background - the CSS property will work in all browsers. The value can be set from 0.0 to 1.0 inclusive. With this you can set the transparency CSS background without an integer value: instead of 0.3 it is enough to write.3:

.block (background-image: url(img.png); opacity: .3;).

To set the background transparency, the CSS of which will work even for IE below version 9, use the filter attribute:

.block (background-image: url(img.png); filter: alpha(opacity=30);).

In this case, the opacity value is set in the range from 0 to 100. Please note that the opacity attribute differs from setting transparency using RGBA by heredity: when using opacity, not only the background becomes transparent, but also all elements inside the block.

Always monitor browser usage statistics for the CIS and all other countries. The biggest problem for all web designers is the old versions of IE; they do not allow the full use of CSS3. When coding, do not forget to use special services that check whether your browser supports any CSS properties. If you cannot install older versions of browsers, find a service that will check the site's operation in different browsers online.

The main thing is to specify the picture on your computer or phone, and then click OK at the bottom of this page. Default plain background The pictures are replaced with transparent ones. The background color of the original image is determined automatically; you just need to specify in the settings what color to replace it with. The main parameter influencing the quality of the replacement is the “Replacement Intensity” and it can be different for each picture.

An example of a photograph of a pink rose without changes and after replacing the plain background with transparent, white and green:

First example with a rose flower on a transparent background made with the following settings:
1) Replacement intensity - 38;
2) Smoothing along the edges - 5;
3) Replace the plain background with a transparent one;
4) Trimming (<0) или Добавление (>0) at the edges - "-70";
5) Invert - disabled (not checked).

For creating second example, with a white background, the same settings were used as in the first example, except for the parameter: “Replace plain background with” - white. IN third example, with a green background, the settings are also used as in the first example, except for the parameter: “color in hex format” - #245a2d.

The original image is not changed in any way. You will be provided with another processed picture with a transparent or specified background.

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.

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 blocks, you can achieve interesting effects on your website. 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 everyone supports modern browsers, with the exception of 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 for getting 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 pattern under the translucent blocks, but an image; it is in this case that transparency becomes noticeable.

This effect is achieved 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. 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

Vlad Merzhevich

Partial transparency, when used correctly, looks very impressive in website design. The main thing is that under the translucent blocks there is not a monochromatic design, but an image; it is in this case that transparency becomes noticeable. This effect is achieved in many ways, and if you remember all, including the old-fashioned methods, it is 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 an unpleasant downside. I’ll make a short review to make it clear what we’re talking about, as well as for those readers who are not familiar with non-traditional options for creating a translucent effect.

PNG as background

IN graphic editor A single-color translucent pattern is pre-prepared and saved in PNG-24 format (Fig. 1). A special feature of this format is that it supports 256 levels of transparency, or simply put, it can display translucent images.

Rice. 1. Image to create the background

Then we add the picture 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 background image

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 above method has a number of limitations. So, when you disable images in the browser, the background will disappear altogether. In addition, it is not so easy to change the background color and transparency value; to do this, you will have to edit the image again.

Checkered image

This method refers to completely ancient methods of implementing translucency, when browsers “couldn’t do anything” and it was necessary to look for non-standard solutions. The trick is to create an image that alternates between transparent and opaque pixels (Figure 3). This regular structure creates a translucent effect, essentially imitating it.

Rice. 3. Enlarged checkered pattern

This is what it looks like in the end (Fig. 4).

Rice. 4. Simulate translucency

The disadvantages of this method are comparable to the previous one; a moiré pattern may also appear and the text will deteriorate.

Opacity property

The CSS 3 opacity property specifies the opacity value and ranges from 0 to 1, where zero is the complete transparency of the element, and one, on the contrary, is opaque. The opacity property has a special feature - the transparency applies to all child elements, and they cannot exceed the opacity value of their parent. It turns out that there cannot be 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 versions up to and including 8.0, opacity does not work, so it uses the browser-specific filter property. Naturally, this 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 colors and backgrounds. 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 recording format is as follows.

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

In parentheses, instead of letters, the value of the color component is placed; it can be viewed in any graphic editor; the last value sets transparency and coincides with 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, and, of course, there will be no transparency. Or use the filter property again, but then you will have to put up with the fact that transparency will also affect the text (example 3). To maintain valid CSS code, 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. Translucent background with opaque text

Compare the picture with the previous one, the letters have become brighter and clearer.

IN Internet browser Explorer 7 discovered a bug when combining background-color with different values. For example, if you set the background color to red, as shown below, the background in IE7 will not appear 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 complains about background when given a value in RGBA format. But at the same time it correctly refers to background-color . In general, as always, you have to choose between browsers and validity.