Home >Web Front-end >CSS Tutorial >What does css background style include?

What does css background style include?

青灯夜游
青灯夜游Original
2021-12-09 10:59:053818browse

css background style includes: background color "background-color", background image "background-image", background positioning "background-position", background repetition "background-repeat", "background", etc.

What does css background style include?

The operating environment of this tutorial: Windows 7 system, CSS3 version, Dell G3 computer.

1. background-color sets the background color of the element.

background-color:颜色/transparent

Description:

  • transparent is fully transparent

  • color value (color name/RGB/16 Base)

The background area includes content, padding and border, and does not include margin

2, background-image sets the background image of the element.

background-image:url(图片地址)/none

Note:

  • The url address can be a relative address or an absolute address

  • Background of the element Occupies the full size of the element, including padding and borders, but not margins

  • By default, the background image is positioned in the upper-left corner of the element and is positioned horizontally and vertically Repeat in the direction.

  • When the background image and background color are set simultaneously, the background image will overwrite the background color

3. background-position sets the starting position of the background image, background positioning

background-position :百分比/px/top/right/bottom/left/center

4, background-attachment background Whether the image is fixed or scrolls with the rest of the page

background-attachment:scroll/fixed
  • scroll: Default, scrolls with the image

  • fixed: The background image does not move when the rest of the page scrolls

5. background-repeat sets whether and how the background image repeats

background-repeat:repeat/no-repeat/repeat-x/repeat-y 

//分别是重复、不重复、水平重复、不重复

6. The background abbreviation attribute is used to set the background attribute in a statement.

background:[background-color] [background-image] [background-repeat] [background-attachment] [background-position]

Note: Each value is separated by spaces, in no particular order

(Learning video sharing: css video tutorial)

The above is the detailed content of What does css background style include?. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn