CSS Background Background knowledge detailed

Background Background Properties

We know that the element has a foreground color, which corresponds to the background colour, and by background we can add a solid color (background-color) and any number of background images (background-image) to the element.

CSS Background Common Properties

• Background-color
• Background-position
• Background-size
• Background-repeat
• Background-origin
• Background-clip
• Background-attachment
• Background-image

First, Background-color

The Background-color property sets the background color of the element. It fills the element's content, padding, and border areas, extending to the outer bounds of the element's border (but excluding margins). If the border has a transparent part (such as a dashed border), the background color is displayed through these transparent sections. If you don't want it to contain a border, you can use another property clip to handle it.

Look, we know that the default background color fills the border.

It has the following values:

1, Key words: red,blue, etc.

2, hexadecimal value: #ff0000

3, transparent value

4. Inherit: The value inherited from the parent element

5, RGB, RGBA (such as RGBA (255,255,0,.8)), HSL, Hsla (e.g. Hsla (360, 50%, 50%,. 5))

such as

Second, background-position

The Background-position property, by definition, is used to control the position of the background, which also sets the origin of the element and the picture, and the origin determines the horizontal and vertical coordinates of the element and a point in the picture. The default origin is in the upper-left corner. This means that the upper-left corner of the element is aligned with the upper-left corner of the picture.

Its value:

First, its five keywords: top, left, right, bottom, center. 22 values can be their property values.

• Top left
• Top Center
• Top Right
• Center left
• Center Center
• Center Right
• Bottom Left
• Bottom Center
• Bottom right

If you set only one of the above keywords, the other one will also take the same value. The order of the keywords is not important, and the left bottom and bottom have the same meaning.

Second, percent value:

The first value is a horizontal position, and the second value is the vertical position. The upper-left corner is 0% 0%. The lower right corner is 100% 100%. Setting only one value is used only to set the horizontal position, and the vertical position is set to center by default.

Three, pixel, or other CSS units

The first value is a horizontal position, and the second value is the vertical position. The upper-left corner is 0 0. Units are pixels (0px 0px) or any other CSS unit. If you specify only one value, the other value will be 50%. You can mix the% and position values.

You can also apply positive negative values, position the upper-left corner of the image to the outside of the element, or push the lower-right corner of the picture outside the element.

Background-position:top right;background-repeat:no-repeat;

：

Third, Background-repeat

The Background-repeat property sets how the background image is repeated. The default background image repeats in both horizontal and vertical directions.

It has the following values:

Repeat: Default value

Repeat-x: Repeat horizontal direction

Repeat-y: Repeat horizontal direction

No-repeat: Image appears only once

Inherit: Inheritance

In addition, CSS3 has two new values:

Background-repeat:round: Automatically adjusts the image size to fit the background area for images that are not clipped.

Background-repeat:space: For pictures not to be cut, automatically add space between the pictures to adapt to the background area.

is a value of background-repeat:space:

The following values are background-repeat:repeat-y:

Iv. Background-image

This property sets the background image for the element. The format is background-image:url (picture path).

Wu, Background-size

CSS3 new background size, as the name implies to adjust the size of the picture.

Its value:

Percent:%

Pixel value: The first value sets the width, and the second value sets the height.

Cover: Pull the big picture, completely fill the background area, maintain aspect ratio.

Contain: Zooms the picture so that it fits the background area and maintains the aspect ratio.

The last two attribute values will pull a small picture very large, so it will cause the picture to be distorted.

Liu, Background-attachment

This property specifies whether the background picture in the element is moved with the element scrolling. The default value is scroll.

The value of it:

Scroll

Fixed: The background image does not move with the element. It is usually applied to the center of the BODY element to add watermarks, so that the watermark does not move with the page scrolling.

Inherit

Seven, Background-clip

The Background-clip property specifies the drawing area of the background.

Its value:

Content-box: The background is clipped to the content box

Border-box: Background is clipped to frame box

Padding-box: The background is clipped to the inner margin

background-color:yellow;background-clip:content-box;padding:15px;

The above code adds 15px padding to the container, and the background is clipped to the content area,

As follows:

　　

Eight, Background-origin

The Background-origin property specifies where the Background-position property is positioned relative to.

Value:

Content-box: The background image is positioned relative to the content box

Border-box: The background image is positioned relative to the border

Padding-box: The background image is positioned relative to the inner margin box

If the Background-attachment property of the background image is fixed, the property has no effect.

Nine, background gradient

Background:linear-gradient

Background:radial-gradient

See this article for a specific explanation

Ten, Background-break

CSS Background Background knowledge detailed