Detailed explanation on adding background series background in CSS3

1. Review the background properties we learned before

1.1 background-color
1.2 background-image
1.3 background-repeat
1.4 background-position
1.5 background-attchment
1.6 background

2. CSS3 new background attribute

2.1 background- origin
2.2 Multiple background
2.3 background-size

1.1 Background color attribute: background-color

There are three ways to express color: word, rgb notation, sixteen Base notation

1. Word:What can be expressed in words are simple colors

2. RGB notation

rgb represents the three primary colors "red", "green", and "blue".
In optical displays, each pixel is composed of luminous elements of three primary colors, which are adjusted to different colors depending on the brightness.

Separate with commas, the values of r, g, and b, each value ranges from 0 to 255, a total of 256 values

绿色： background-color: rgb(0,255,0); 蓝色： background-color: rgb(0,0,255); 黑色：（光学显示器，每个元件都不发光，黑色） background-color: rgb(0,0,0);

3. Hexadecimal Notation

All values starting with # are hexadecimal.

红色： background-color: #ff0000; 16进制表示法，也是两位两位看，看r、g、b，但是没有逗号隔开。 ff就是10进制的255 ，00 就是10进制的0，00就是10进制的0。所以等价于rgb(255,0,0);

Supplement:
Basic numbers in decimal system (10 in total): 0, 1, 2, 3, 4, 5, 6, 7, 8, 9
Basic numbers in hexadecimal (16 in total): 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c, d, d, e, f

In hexadecimal, what does the number 13 represent?
means 1 16 and 3 1s. That's 19. This is the concept of position. The first person represents how many 16s, and the last person represents how many 1s.

1.2 background-image

is used to add a backgroundimageto the box. The background is naturally filled.

background:url(images/1.jpg);

1.3 background-repeat

Set whether the background image is repeated in a repeating manner.

background-repeat:no-repeat; do not repeat background-repeat:repeat-x; repeat horizontally background-repeat:repeat-y; repeat vertically

1.4 background-position

Background positioning attribute

background-position:向右移动量 向下移动量

Describe with words:

Words describing the left and right:left, center,right
Describe the top and bottom Words:top, center,bottom

右下角：background-position: right bottom;

1.5 Whether the background image scrolls (background-attchment)

scroll: scroll. Default value fixed: fixed. Will not scroll as the scroll bar scrolls local

1.6 background comprehensive attribute

The background attribute is the same as border, it is a comprehensive attribute:

background:red url(1.jpg) no-repeat 100px 100px fixed; 等价于： background-color:red; background-image:url(1.jpg); background-repeat:no-repeat; background-position:100px 100px; background-attachment:fixed;

You can omit any part:

background: red;

If the box has a background image and a background color. In fact, it mainly displays pictures, and the rich places are filled with colors.

background: blue url(images/wuyifan.jpg) no-repeat 100px 100px;

2.1 The reference point of the background image (background-origin)

border-box: Ignore the border and start tiling directly from the starting point 0,0 of the borderpadding-box: Default value, ignore padding, start tiling directly from the starting point 0,0 of paddingcontent-box: Start tiling from the content part When paving, a space for padding will be reserved. So padding will affect it

2.2 Multiple backgrounds

CSS3-New background series background. Background images are separated by commas, and you can write multiple groups.The first rendered image may obscure the later rendered images.

background: url(images/1.jpg) 0 0 no-repeat,url(images/2.jpg) 121px 0 no-repeat,url(images/3.jpg) 242px 0 no-repeat;

2.3 Control the size of the background image (background-size)

background-size: value

Value:

**Length Value **pxPercentage: Based on the box widthauto: The real size of the background image

contain:Full display(When the width or height of the image "touches" the edge of the box when scaling, the change will stop)

cover：Completely covered(Scale thebackground imageproportionally to completely cover the container, the background image may exceed the container)

When there is only one value, such as width to achieve stretching, the height will default to auto and remain ratio.
When there are two values, the width and height will be stretched to the corresponding values respectively, and may be deformed.

The above is the detailed content of Detailed explanation on adding background series background in CSS3. For more information, please follow other related articles on the PHP Chinese website!