Shulou(Shulou.com)06/03 Report--

This article shows you an example analysis of programming in the background part of CSS, which is concise and easy to understand, which will definitely brighten your eyes. I hope you can get something through the detailed introduction of this article.

In CSS, each element box can be thought of as consisting of two layers.

Foreground layer: content (such as text or pictures) and borders.

Background layer: filled with solid colors (using the background-color attribute), or can contain any number of background images (using the background-image attribute), which are superimposed on top of the background color.

Before CSS3 is implemented by the browser, only one image can be added to the background color. Now we can add multiple images (and CSS3 gradients) to the background layer.

CSS background attributes:

Background-color

Background-image

Background-repeat

Background-position

Background-size

Background-attachment

Background (abbreviated attribute)

Background-clip, background-origin, background-break (currently not widely supported)

Background color

Format: background-color: color valu

Example: background-color: # caebff

Background picture

Format: background-image:url (picture path / picture file name)

Example: background-image:url (images/blue_circle.png)

By default, the background image starts from the upper-left corner of the element, repeats horizontally and vertically, and eventually fills the entire background area.

Background repetition

Format: background-repeat: repeat | repeat-x | repeat-y | no-repeat

Example: background-repeat:repeat-x

Description:

The repeat default value is repeated horizontally and vertically until the background area of the element is filled.

The repeat-x repeats horizontally.

The repeat-y repeats vertically.

No-repeat does not repeat in any direction (let the background image be displayed only once).

Background position

The background-position property, which controls the location of the background, is the most complex of all background attributes.

The attribute has five key values, top, left, bottom, right, and center, and any two of these keywords can be combined as the value of the attribute.

The background-position attribute sets the origin of both the element and the picture. The origin determines the horizontal and vertical coordinates of the element and a point in the picture. By default, the origin of the background-position is in the upper-left corner.

In the first case, use keywords to set the location. The default values of the background-position attribute, top and left, control the starting point of horizontal and vertical repetition. If you change the starting position: p#center {background-position:center center;} (abbreviated as background-position:center), set a key value, and the other will take the same value. The background picture starts at the center of the paragraph

In the second case, use the percentage to set the position.

Example: background-position:50% 50% position, and then set background-repeat to no-repeat to achieve the effect of centering the image in the background area. The first value represents the horizontal position and the second value represents the vertical position. If only one value is set, it will be used to set the horizontal position and the vertical position will be set to center.

In the third case, absolute or relative unit values are used. If the position is set in pixel units, the upper-left corner of the image will be placed at a specified location from the upper-left corner of the element. In addition, negative values can be used to position the upper-left corner of the picture outside the element, so that only part of the picture can be seen in the element. Of course, you can also set a positive value large enough to push the lower right corner of the picture to the outside of the element to achieve the same effect.

Background size

Background-size is an attribute specified by CSS3 and is used to control the size of the background image.

The values and meanings that can be set are as follows:

50%: zoom the picture to fill half of the background area.

100px 50px: adjust the picture to 100 pixels wide and 50 pixels high.

Cover: enlarge the picture to completely fill the background area; maintain the aspect ratio.

Contain: zoom the picture to fit the background area; maintain the aspect ratio.

Note: pulling a very small picture will cause the picture quality to be distorted.

Background adhesion

The background-attachment attribute controls whether the background picture within a scrolling element scrolls as the element scrolls.

Property values are:

Scroll . The background picture moves with the element.

Fixed . The background picture does not move as the element scrolls.

Tip: background-attachment:fixed is most commonly used to add a light watermark to the center of the body element so that the watermark does not move as the page scrolls.

Abbreviated background attribute

Example: body {background:url (images/watermark.png) center # fff no-repeat contain fixed;}

Note: if the value of an attribute is omitted from the declaration (for example, no-repeat is not written), the default value (repeat) of the corresponding attribute will be used.

Multi-background picture

CSS3 can add multiple background images to the background of an element.

Example:

CSS p {

Background:

Url (images/turq_spiral.png) 30px-10px no-repeat

Url (images/pink_spiral.png) 145px 0px no-repeat

Url (images/gray_spiral.png) 140px-30px no-repeat, # ffbd75

}

Background gradient

A gradient is a natural transition between two or more colors within a certain length.

Tip: the gradient is the background image generated by CSS. You can use either the background-image attribute or the abbreviated background attribute to add gradients.

There are two kinds of gradients:

Linear gradient. Extends from one end of the element to the other.

Radioactive gradients. Diverge around from a point within the element.

Manufacturer prefix

In order to encourage browser manufacturers to adopt the W3C CSS3 recommendation as soon as possible, the concept of VSP (Vendor Specific Prefixes, vendor prefix) came into being.

Example:

The standard syntax for the transform attribute is as follows:

Transform: skewX (- 45deg)

Since this property is not fully finalized, to ensure that it can be used in most browsers and their experimental implementations, you should add VSP to the property for the browsers you want to support. Each browser uses only attribute declarations that it can understand:

CSS

-moz-transform:skewX (- 45deg); / * Firefox * /

-webkit-transform:skewX (- 45deg); / * Chrome and Safari * /

-ms-transform:skewX (- 45deg); / * Microsoft Internet Explorer * /

-o-transform:skewX (- 45deg); / * Opera * /

Transform:skewX (- 45deg); / * finally, W3C standard attributes * /

The following CSS3 attributes must be appended with VPS:

CSS

Border-image translate

Linear-gradient transition

Radial-gradient background*

Transform background-image*

Transform-origin

> * for background picture or gradient

The above is a sample analysis of programming in the background section of CSS. Have you learned any knowledge or skills? If you want to learn more skills or enrich your knowledge reserve, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.