With the advent of CSS3 DTP work in many ways has become easier and more logical: after all, you can now do to flexibly configure an object, more rarely resorting to JavaScript.Let's say you need to adjust the transparency of the background - CSS immediately offers several options.
background defined 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 prescribed alone orto unite under the same attribute background.Let us examine each of these in more detail.
attribute background-color
In CSS, the background color can be set in several ways: using the hexadecimal code, color name or RGB-entry.In CSS3 it became possible to use instead of RGB-recording option with RGBA.
hex color code is written in the property after the lattice: background-color: # FFDAB9.If the characters in pairs match such a record, the code is usually a little cut: # ccff00 can be written as # cf0:
body {background-color: # cf0;}.
name there, even in the most exotic colors.For example, in addition to the standard red and white, you can use NavajoWhite (#FFDEAD) or Honeydew2 (# E0EEE0):
body {background-color: purple;}.
last option RGB or RGBA record allows you to specify not only color but also the transparency of the background CSS, but the way to work in IE 9 only older versions.Other browsers recognize normal variant with transparency.According to the W3C standards it is preferable to use all the same RGBA instead of the more usual RGB.
last value at the RGBA sets the opacity of the background and from 0 (transparent) to 1 (opaque).
There are some unusual values.The background color can be specified using HSL and HSLA.Both were added in CSS3, and therefore not supported by IE version 9 or higher.Options are identical to RGB or RGBA, just in a different format: Hue (hue - the value on the color wheel, is given in degrees), Saturate (saturation - color intensity as a percentage, from 0 to 100), Lightness (lightness - brightness, measured similarly parameter Saturate).
attribute background-image
most cross-browser version of a transparent background - is the use of the image.In CSS3, you can specify even more images, this is done through a comma.Example:
body {background-image: url (bg1.png), url (bg2.png)}.
supports this even IE8.Several images as the background used in the layout of the rubber.Importantly, do not forget to use any image as set in your CSS background color, because users can simply upload a picture.
attribute background-position
If you use an image to define the background block, CSS allows you to position the image anywhere on the screen.By default, the image is located in the upper left corner.Attribute accept any verbal directions (top, bottom, left, right), or numerical (interest, pixels and other units).It is necessary to specify the two values for horizontal and vertical:
body {background-position: right center;} - in this example, the background will be located on the right side of the page, with the top and bottom of the distance to the image are the same.
attribute background-size
Sometimes you need to use CSS to stretch the background or reduce its size.For this purpose, the attribute background-size, and the size can be defined as background pixels or percentage, or in any other unit of measurement.
With this attribute, there are some problems: for correct display of a background in older browsers you must use a prefix.Of course, the current versions fully support this attribute and the need for specific properties disappeared.
attribute background-attachment
This attribute specifies the behavior of the background image when scrolling.For example, it can take 3 values (excluding inherit, for the total of all the attributes in this article):
- fixed - makes the picture on the background of fixed;
- scroll - the background scrolls with the rest of the elements;
- local - the image on background is scrolled if scrolling is content.Background, which goes beyond the content is fixed.
Example of use:
body {background-attachment fixed}.
Currently, Firefox does not support the latest property (local).
attribute background-origin
This attribute is responsible for the positioning of the element.Browsers earlier versions require the use of prefixes.The property itself has three parameters:
- padding-box positions from the edge of the background, while taking into account the thickness of the frame;
- border-box properties different from the previous in that the boundary line can be completely or partially cover the background;
- content-box positioning image pryavyazyvaya its content.
If you specify multiple values, the browser can react in their own way: Firefox and Opera only accept the first option.
attribute background-repeat
As a rule, if the background image is specified, it must be repeated horizontally or vertically.For this and used the attribute background-repeat.Thus, block background, CSS which contains such a property can have one of several options:
- no-repeat - image appears on the page in a single form;
- repeat - pattern repeated in the x and y;
- repeat-x - only horizontally;
- repeat-y - only vertically;
- space - pattern repeats, but if space is filled not, then there are voids between pictures;
- round - the image is scaled, if it does not fill the entire area entire picture.
Example of attribute:
body {background-repeat: no-repeat repeat} - similarly background-repeat: repeat-y.
In CSS3 may specify values for multiple images if the transfer parameters separated by commas.
attribute background-clip
This attribute specifies the behavior of the background under the boundaries (for example, in the case of the dotted frames):
- padding-box - background displayed in the interior of the block;
- border-box - comes within the scope of the image;
- content-box - the picture on the background appears only within the content.
Example of use:
body {background-clip: content-box;}.
Chrom and Safari require the use of the prefix -webkit-.
opacity attribute and filter
opacity attribute allows you to set the background transparency - CSS property will work in all browsers.The value is adjustable from 0.0 to 1.0 inclusive.With this you can set the transparency of the background CSS without an integer value instead of 0.3 is enough to write .3:
.block {background-image: url (img.png);opacity: .3;}.
To set the background transparency, CSS is suitable even for IE below the ninth version, use the attribute filter:
.block {background-image: url (img.png);filter: alpha (opacity = 30);}.
In this case, the opacity is set between 0 and 100. Note that the opacity attribute different transparency settings via RGBA heredity: opacity using a transparent background is not only, but also all items inside the unit.
Always make sure the browser usage statistics of the CIS and all the other countries.The biggest problem of all DTP - older versions of IE, they do not allow full use of the CSS3.If the layout do not forget to use the special services that check whether your browser is a property CSS.If you can not install older versions of browsers, you get the service that checks the operation of the site in different browsers online.
