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

This article mainly introduces the relevant knowledge of "what is the background attribute commonly used in css3". The editor shows you the operation process through an actual case. The operation method is simple, fast and practical. I hope this article "what is the background attribute commonly used in css3" can help you solve the problem.

Common background attributes are: 1, background-color;2, background-image;3, background-repeat;4, background-position;5, background-size;6, background.

The operating environment of this tutorial: windows7 system, CSS3&&HTML5 version, Dell G3 computer.

When making a web page, we often need to add some background colors and background images to make the page more beautiful and attract the attention of visitors. A series of attributes are provided in CSS to set the background effect of the HTML element, as follows:

Background-color: sets the background color of an element

Background-image: sets the background image of an element

Background-repeat: controls whether the background image is duplicated

Background-attachment: controls whether the background image scrolls with the window

Background-position: controls the position of the background image in the element

Background-size: setting the size of the background image

Background-origin: sets the position relative to the background-position property to locate the background image

Background-clip: sets the display area of the background image

Background: an acronym for background attributes, all of which can be set in a declaration.

1. Background-color

You can use the background-color attribute to set a background color for an element, which supports the following property values:

Value description color_name uses a specific color name to set the background color for the element (for example, red) hex_number uses hexadecimal codes to set the background color for the element (for example, # ff0000) rgb_number uses the rgb () function to set the background color for the element (for example, rgb), sets the background color to transparent, which we don't use in most cases. But if you don't want an element to have a background color, or if you don't want the user's settings for the browser (such as night mode, eye protection mode) to affect your design, you can use transparent to make the color transparent inherit inherits the background color settings from the parent element.

[example] use background-color to set the background color for the element:

Copy plain text copy CSS background # bg {color: white; background-color: blue; margin: 20px; / * set the outer margin to 20px*/ padding: 20px; / * set the inner margin to 20px*/ border: 10px dotted yellow; / * set a wide 10px yellow dashed border * /} background-color attribute

CSS background # bg {color: white; background-color: blue; margin: 20px; / * set the outer margin to 20px*/ padding: 20px; / * set the inner margin to 20px*/ border: 10px dotted yellow; / * set a wide 10px yellow dashed border * /} background-color attribute

The running result is shown in the following figure:

Figure: background-color property demonstration

From the running results, you can see that the background-color attribute can set a solid color background for the element, which fills the element's content, inner margin, and border area (which can also be understood as the border and all areas within), but has no effect on the area outside the element's border (outer margin).

2. Background-image

Background-image is used to set a background image for an element. By default, the browser starts from the upper-left corner of the element's content (or, if there is an inner margin, from the upper-left corner of the inner margin area of the element), repeating the background image horizontally and vertically to fill the entire element area. You can use the background-repeat attribute to control whether or how the background image is repeated.

The optional values for the background-image property are as follows:

The value describes the path of url ('URL') to the image, and url () can be regarded as a function. URL in parentheses is the default none of the specific path of the image, and does not show the setting of the background image inherit inheriting the background image from the parent element.

[example] use the background-image attribute to change the picture [

] set to the background image of the element:

Copy plain text copy CSS background # bg {color: red; background-image: url ('. / bg-image.png'); margin: 20px; / * set the outer margin to 20px*/ padding: 20px; / * set the inner margin to 20px*/ border: 10px dotted red; / * set a red dashed border with wide 10px * /} background-image attribute

CSS background # bg {color: red; background-image: url ('. / bg-image.png'); margin: 20px; / * set the outer margin to 20px*/ padding: 20px; / * set the inner margin to 20px*/ border: 10px dotted red; / * set a red dashed border with wide 10px * /} background-image attribute

The running result is shown in the following figure:

Figure: background-image property demonstration

The coverage area of the background image is the same as the background color, and it also fills the content, inner margin, and border area of the element, but has no effect on the area outside the element border (outer margin).

3. Background-repeat

By default, the background image starts from the upper-left corner of the element's content (or, if there is an inner margin, from the upper-left corner of the inner margin area of the element), repeating the background image horizontally and vertically to fill the entire element area (excluding the outer margin area of the element). You can use the background-repeat attribute to set whether or how the background image is repeated. The optional values for this attribute are as follows:

The value describes the repeat default value, the background image repeats the repeat-x background image vertically and horizontally, the repeat-y background image repeats only horizontally, the no-repeat background image is displayed only once in the vertical direction, and does not repeat the setting that inherit inherits the background-repeat attribute from the parent element in any direction

[example] use the background-repeat attribute to make the background image repeat only horizontally:

Copy plain text copy CSS background # bg {color: black; background-image: url ('. / bg-image.png'); background-repeat: repeat-x; margin: 20px; / * set the outer margin to 20px*/ padding: 20px; / * set the inner margin to 20px*/ border: 10px dotted red / * set a red dotted border with a wide 10px * /} background-repeat property

CSS background # bg {color: black; background-image: url ('. / bg-image.png'); background-repeat: repeat-x; margin: 20px; / * set the outer margin to 20px*/ padding: 20px; / * set the inner margin to 20px*/ border: 10px dotted red; / * set a red dashed border with wide 10px * /} background-repeat attribute

The running result is shown in the following figure:

Figure: background-repeat property demonstration

4. Background-position

The background-position property is used to set the starting position of the background image. The optional values for this property are as follows:

Value description left top (top left),

Left center (middle left),

Left bottom (bottom left),

Right top (top right),

Right center (middle right),

Right bottom (bottom right),

Center top (upper middle),

Center center (center),

Center bottom (middle and lower) uses some keywords to indicate the position of the background image. If you set only the first keyword, the second will default to centerx% y% using percentage to indicate the distance of the background image from the upper left corner of the element, x% is horizontal, y% is vertical, the upper left corner is 0%, and the lower right corner is 100% 100%. If you set only the first value, the other value will be 50%. The default value is 0 0%xpos ypos, which uses pixels (px) or other CSS units to represent the distance of the background image from the upper left corner of the element. Xpos is horizontal, ypos is vertical, the upper left corner is 0px 0px, and the lower right corner depends on the size of the element. The form of percentage and unit can be mixed. If you only set the first value, the other value will default to 50%.

[example] use the background-position property to set the location of the background image:

Copy plain text copy CSS background # bg {color: black; background-image: url ('. / bg-image.png'); background-repeat: no-repeat; background-position: 0% 50%; margin: 20px; / * set the outer margin to 20px*/ padding: 20px; / * set the inner margin to 20px*/ border: 10px dotted red / * set a red dotted border with a wide 10px * /} background-position property

CSS background # bg {color: black; background-image: url ('. / bg-image.png'); background-repeat: no-repeat; background-position: 0% 50%; margin: 20px; / * set the outer margin to 20px*/ padding: 20px; / * set the inner margin to 20px*/ border: 10px dotted red / * set a red dotted border with a wide 10px * /} background-position property

The running result is shown in the following figure:

Figure: background-position property demonstration

5. Background-size

The background-size property is used to set the size of the background image. The optional values for this property are as follows:

Value description xpos ypos uses pixels (px) or other CSS units to set the height and width of the background image, xpos represents width, ypos represents height, if only the first value is set, then the second value will be set to the default value auto (automatic) x% y% use percentage to represent the percentage of the background image relative to the width and height of the element, x% represents width, y% represents height, if only the first value is set Then the second value will be set to the default value auto (automatic) cover keeps the horizontal and vertical ratio of the background image and zooms the image large enough so that the background image can completely cover the area of the element, which may cause some parts of the background image to go beyond the element area and unable to display contain to keep the horizontal and vertical ratio of the background image and scale the image large enough for the background image to be fully displayed in the area where the element is located. The background image may not completely cover the entire element area.

[example] use the background-size attribute to set the size of the background image, and spread the background image horizontally over the entire element area:

Copy plain text copy CSS background body {background-image: url ('. / bg-image.png'); background-repeat: repeat-x; background-size: contain;}

Background-size attribute

CSS background body {background-image: url ('. / bg-image.png'); background-repeat: repeat-x; background-size: contain;}

Background-size attribute

The running result is shown in the following figure:

Figure: background-size property demonstration

6. Background

Background is an abbreviated form of background attributes, which allows you to set not only a background attribute for an element, but also multiple or all background attributes at the same time. There is no fixed order when setting multiple background properties, but it is recommended that you set them in the following order:

Background-color | | background-image | | background-position [/ background-size]? | | background-repeat | | background-attachment | | background-origin | | background-clip

When setting multiple background properties, there are the following points to note:

Separate each attribute with a space

If you set both the background-position and background-size properties, you need to use a slash / separation between the two attributes and follow the order in which the background-position attribute comes after the background-size attribute

If you set both the background-origin and background-clip properties, you need to follow the order in which the background-origin attribute comes before the background-clip attribute. If the values of the background-origin and background-clip properties are the same, you can set only one value.

[example] set multiple background attributes at the same time through background:

Copy plain text copy CSS background # bg {background: # ccc url ('. / bg-image.png') 0px 0px/contain repeat-x border-box; margin: 20px; / * set the outer margin to 20px*/ padding: 20px; / * set the inner margin to 20px*/ border: 10px dotted red; / * set a red dashed border with wide 10px * /} background attribute

CSS background # bg {background: # ccc url ('. / bg-image.png') 0px 0px/contain repeat-x border-box; margin: 20px; / * set the outer margin to 20px*/ padding: 20px; / * set the inner margin to 20px*/ border: 10px dotted red; / * set a red dashed border with wide 10px * /} background attribute

The running result is shown in the following figure:

Figure: background property demonstration

The background property also supports setting multiple sets of property values (for example, # ccc url ('. / bg-image.png') 0px 0px/contain repeat-x border-box in the above example can be seen as a set of properties), each set of property values separated by a comma. However, it is important to note that the background-color property cannot be set more than one, and can only be set in the last set of property values.

If there is an overlap between the background images among the multiple sets of properties set, the previously set background image will be overlaid over the subsequent background image. The sample code is as follows:

Copy plain text copy CSS background body {background: url (". / css.png") 10px 10px/60px 60px no-repeat padding-box, url (". / css.png") 50px 30px/120px 120px no-repeat content-box, url (". / css.png") 140px 40px/200px 100px no-repeat content-box # 58a } CSS background body {background: url (". / css.png") 10px 10px/60px 60px no-repeat padding-box, url (". / css.png") 50px 30px/120px 120px no-repeat content-box, url (". / css.png") 140px 40px/200px 100px no-repeat content-box # 58a;}

The running result is shown in the following figure:

Figure: multiple background cascading effect

This is the end of the content about "what are the background attributes commonly used in css3". Thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

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.