CSS background transparency. Transparent background or text using CSS

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

The background is set by a set of attributes (background-image, background-position, background-size, background-repeat, background-attachment, background-origin, background-clip, background-color), each of which can be separately written or combined under the attribute Background. Let's analyze each of them in more detail.

The background-color attribute

In CSS, you can specify the background color in several ways: using hexadecimal code, color name, or RGB entry. In CSS3, it became possible to use the RGBA option instead of the RGB record.

The hexadecimal color code is written in the property after the grid: background-color: # FFDAB9. If the characters in the same entry are matched in pairs, the code is usually slightly shortened: # ccff00 can be written as # cf0:

Body {background-color: # cf0;}.

The name is even in the most exotic flowers. For example, in addition to the standard red and white, you can use NavajoWhite (#FFDEAD) or Honeydew2 (# E0EEE0):

Body {background-color: purple;}.

The last version of the RGB or RGBA record allows you to specify not only the color, but also the transparency of the CSS background, but the method works in IE only over version 9. Other browsers normally recognize the option with transparency. By W3C standards, it is preferable to use RGBA instead of the more usual RGB.

The last value for RGBA and sets the opacity of the background from 0 (transparent) to 1 (opaque).

There are some more unusual meanings. The background color can be set with HSL and HSLA. Both were added to CSS3, and therefore IE is not supported below version 9. The options are identical to RGB or RGBA, only in a different format: Hue (the hue is the value on the color wheel, is set in degrees), Saturate (the intensity is the percentage of the color, in percentage, from 0 to 100), Lightness (brightness is the brightness, measured in the same way as the parameter Saturate ).

The background-image attribute

The most cross-browser version of the transparent background is the use of the image. In CSS3, you can specify even a few images, this is done through a comma. Example:

Body {background-image: url (bg1.png), url (bg2.png)}.

This method supports even IE8. Several images as a background are used for rubber imposition. The main thing, do not forget, when using any image, also to set the background color in CSS, because users can simply not boot the image.

The background-position attribute

If you use an image to specify the background of the block, CSS will allow you to position the picture anywhere on the screen. By default, the image is located in the upper left corner. The attribute takes either verbal instructions (top, bottom, left, right), or numeric (percentages, pixels and other units of measure). In this case, you must specify two values: horizontally and vertically:

Body {background-position: right center;} - in this example, the background will be on the right side of the page, with the bottom and top of the distance to the image the same.

The background-size attribute

Sometimes you want to use CSS to stretch the background or reduce its size. To do this, use the attribute background-size, and the background size can be specified in pixels or percentages, and in any other units of measurement.

With this attribute there are some problems: for correct display of the background in the early versions of browsers it is necessary to use prefixes. Of course, the current versions fully support this attribute and the need for specific properties has disappeared.

The background-attachment attribute

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

• Fixed - makes a picture on the background of a fixed;
• Scroll - the background scrolls along with the rest of the elements;
• Local - the image on the background scrolls if the scroll has content. A background that goes beyond the contents is fixed.

Example of use:

Body {background-attachment fixed}.

Currently, Firefox does not support the last property (local).

The background-origin attribute

This attribute is responsible for positioning the element. Browsers of early versions require the use of prefixes. The property itself has three parameters:

• Padding-box positions the background with respect to the edge, taking into account the thickness of the frame;
• Border-box differs from the previous property in that the boundary line can completely or partially cover the background;
• The content-box positions the image, spinning it to the content.

If several values are specified, then browsers can react in their own way: Firefox and Opera perceive only the first option.

The background-repeat attribute

Typically, if the background is specified by the image, it must be repeated horizontally or vertically. For this, the background-repeat attribute is used. So, 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 variant;
• 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 space is not filled, images appear between the pictures;
• Round - the image is scaled if you can not get the whole area filled with whole pictures.

An example of using an attribute:

Body {background-repeat: no-repeat repeat} - similar to background-repeat: repeat-y.

In CSS3, it is possible to specify values for several images, if you list parameters using a comma.

The background-clip attribute

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

• Padding-box - the background is displayed strictly within the block;
• Border-box - the image comes under frames;
• Content-box - the picture on the background appears only inside the content.

Example of use:

Body {background-clip: content-box;}.

Chrom and Safari require the use of the -webkit- prefix.

The 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 is set from 0.0 to 1.0 inclusive. In doing so, you can set the background transparency of CSS Without an integer value: instead of 0.3, it suffices to write .3:

.block {background-image: url (img.png); Opacity: .3;}.

To set the transparency of the background, the CSS of which is suitable even for IE below the ninth version, use the filter attribute:

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

In this case, the opacity value is set from 0 to 100. Note that the opacity attribute differs from the transparency setting with RGBA inheritance: when using opacity, not only the background becomes transparent, but all elements inside the block are also transparent.

Always follow the statistics of the use of browsers in the CIS and all other countries. The biggest problem for all layout makers is the old version of IE, they do not allow you to use CSS3 to the fullest. When making layout, do not forget to use special services that check if your browser supports any CSS property. If you can not install older versions of browsers, find a service that will test the operation of the site in different browsers online.