Must-know CSS knowledge-background property

---

css allows the use of solid colors as backgrounds, and also allows the use of images as backgrounds.
About background settings:

• ##background-color

   background-color:red;

  —Note: background-color cannot

  Inherits , its default value is transparent. Transparent means "transparent". That is, if an element does not specify a background color, the background is transparent so that the background of its ancestor elements is visible.

• background-image

   background-image:url(lks.jpg);

  —Note: The background image cannot be inherited, and the background image cannot be resized. .

  Browser support for image formats:
  

• gif animation 256 colors

• jpg rich colors, browser The support effect is good

• #png The format recommended by w3c, but the browser support is not very good (IE6, IE7, not supported).

• ##background-repeat

  background-repeat:repeat;        //默认 背景图像将在垂直方向和水平方向重复。
  background-repeat:repeat-x;      //背景图像将在水平方向重复。
  background-repeat:repeat-y;      //背景图像将在垂直方向重复。
  background-repeat:no-repeat;     //背景图像将仅显示一次。

• background -attachment

  background-attachment:scroll;    //默认值。背景图像会随着页面其余部分的滚动而移动。
  background-attachment:fixed;     //当页面的其余部分滚动时，背景图像不会移动。

• background-position—Note: You need to set the background-attachment attribute Be "fixed" to ensure that this property works properly in Firefox and Opera.
  

• background-position:

  top left; <a href="http://www.php.cn/wiki/904.html" target="_blank"></a>The first one refers to the vertical direction, the second one is Refers to the horizontal direction, separated by spaces. Can be set in the vertical direction: top, center,
  bottom
  ; Can be set in the horizontal direction: left, center, right
  ;If you only specify a keyword, then the second value will be "center".
  

• background-position: 50% 50%;

  Default value: 0% 0%. The first value is the horizontal position, and the second value is the vertical position.
  The upper left corner is 0% 0%. Bottom right corner is 100% 100%.
  If you specify only one value, the other value will be 50%.
  
  

• background-position: 20px 30px;

  The first value is the horizontal position, 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%.
  
  

Note:

1. When we set the border for the body, we will find that the border only encloses the content in the body. But setting the background color for the body fills the entire screen.

2. When using an image as the background, the image is positioned with reference to the

visible area
of the screen, not the part framed by the border. 3. When we want to set the background at once, our order is very careful.
background: red url(xin.jpg) norepeat fixed center center;
Each parameter is separated by spaces, followed by color, picture, repetition, fixed method, and position. In fact, after I reversed their positions in the browser, I found that IE6 and IE7 cannot support the out-of-order settings very well, but modern browsers can still support it. For compatibility reasons, it is recommended to use the above order.

Welcome additions and corrections☺

[Related recommendations]

1.

Free css online video tutorial

2.

css online manual

3.

php.cnDugu Jiujian (2)-css video tutorial

The above is the detailed content of Must-know CSS knowledge-background property. For more information, please follow other related articles on the PHP Chinese website!