The background part of CSS Programming Learning tutorial

Inside the CSS, each element box can be imagined as being composed of two layers.

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

Background layer: Fills with a solid color (using the Background-color property), or it can contain any number of background pictures (using the Background-image property), and the background picture is superimposed over the background color.

You can only add a picture to the background color before CSS3 is implemented by the browser. Now, we can add multiple pictures (and CSS3 gradients) to the background layer.

CSS Background properties:

Background-color

Background-image

Background-repeat

Background-position

Background-size

Background-attachment

Background (shorthand attribute)

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

Background color

Format: background-color: color value;

Example: Background-color: #caebff;

Background picture

Format: Background-image:url (picture path/picture filename);

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

By default, the background picture repeats itself in both horizontal and vertical directions, starting with the upper-left corner of the element, and eventually fills the entire background area.

Background repeat

Format: background-repeat:repeat | Repeat-x | repeat-y | No-repeat;

Example: Background-repeat:repeat-x;

Description

Repeat the default value, repeating both horizontally and vertically until the background area of the element is filled.

Repeat-x Horizontal direction repeat.

Repeat-y Vertical direction repeat.

No-repeat is not duplicated in any direction (only the background picture is displayed once).

Background position

The Background-position property used to control the background position is the most complex of all background attributes.

The property has 5 key values, top, left, bottom, right, and center, and any two of these keywords can be combined as values for that property.

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

In the first case, use the keyword to set the position. The default value of the Background-position property, top, left controls the starting point of the horizontal and vertical repetitions. such as modify start position: p#center {Background-position:center Center;} (Simplified notation: background-position:center, set a key value, the other will also take the same value.) , the background picture starts with the center point of the paragraph.

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

Example: background-position:50% 50%, and then background-repeat set to No-repeat, you can achieve the picture in the background area centered effect. The first value represents the horizontal position, and the second value represents the vertical position. If only one value is set, it is used to set the horizontal position, and the vertical position is set to center.

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

Background size

Background-size is a CSS3-defined property that controls the size of the background picture.

The values and meanings can be set as follows:

50%: Scale the picture so that it fills half of the background area.

100px 50px: Adjust the picture to 100 pixel wide, 50 pixel high.

Cover: Pull the big picture to fill the background area completely, keep the ratio of width to height.

Contain: Scales the picture so that it fits well in the background area, and keeps the ratio of width to height.

Note: Putting very small pictures on the drawing assembly causes the picture quality to be distorted.

Background glue

The Background-attachment property controls whether the background picture within a scrolling element scrolls with the element scrolling.

Property values are:

Scroll The background picture moves with the element.

Fixed The background picture does not move with the element scrolling.

Tip: Background-attachment:fixed is most commonly used to add a tint watermark to the center of the body element so that the watermark does not move with the page scrolling.

Shorthand Background Property

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

Note: The default value (repeat) of the corresponding property is used when the value of the attribute is less written in the declaration (for example, No-repeat is not written).

Multi background picture

CSS3 can add multiple background pictures to an element background.

Example:

CSS code copy content to clipboard

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: Gradients are background images that CSS helps us generate. You can add gradients using the Background-image property, or you can use the shorthand background property.

Gradients are divided into two types:

Linear gradient. Extend from one end of an element to the other end.

Radioactive gradients. Scatter from one point to the other in the element.

Vendor prefix

The concept of VSP (vendor specific prefixes, vendor prefix) was created to encourage browser vendors to adopt the CSS3 recommendation standard of the consortium as soon as possible.

Example:

The standard syntax for the Transform property is this:

Transform:skewx ( -45DEG);

Since this property is not fully finalized, to ensure that this property is available in most browsers and their experimental implementations, you should add VSP to this property for browsers that you want to support. Each browser uses only its own understandable attribute declaration:

CSS code copy content to clipboard

-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); /* The last is the standard of the consortium *

The following CSS3 attributes must be added to the VPS:

CSS code copy content to clipboard

Border-image Translate

Linear-gradient transition

Radial-gradient background*

Transform background-image*

Transform-origin

> * For background pictures or gradients