CSS background related properties in detail

The impression that the CSS controls the background is just a background, but background is a composite property

It includes:

• Background-color: Background color, CSS support color representation method, can be used

• Background-image: Background image (URL)

• Background-repeat: Whether the background is duplicated (Repeat, no-repeat, repeat-x, repeat-y)

• Background-position: Background positioning (keywords, percentages, pixels)

• Background-size: Background size

• Background-origin: Positioning area of the background

• Background-clip: Background Paint area

• Background-attachment: Specifies whether the background image is fixed or scrolls along with the rest of the page

In addition to these, multi-backgrounds, gradients, masks, I also put them in the background.

Take a look at it -0-.

At the beginning, I thought for a long time that the background was a background of the word. Because I always write:

. p{background: #000 URL ("1.jpg") No-repeat left center;/* color, picture, tiling, positioning */}

I don't know if people write like me. Very simple, background color, background image, whether to repeat, positioning 4 properties attached to write.

Here are the other properties.

Location area of the background (Background-origin): The value is a keyword, there are 3

. div{        width:400px;        height:200px;        padding:20px;        border:10px solid Rgba (255,255,255,.2);        Background: #000 URL ("1.jpg") no-repeat;        Background-origin:border-box;        /*background-origin:padding-box;*/        /*background-origin:content-box;*/    }

• Border-box

• Padding-box

• Content-box