Home > Article > Web Front-end > 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:red;—Note: background-color cannot
background-image:url(lks.jpg);—Note: The background image cannot be inherited, and the background image cannot be resized. .
Browser support for image formats:
##background-repeatbackground-repeat:repeat; //默认 背景图像将在垂直方向和水平方向重复。
background-repeat:repeat-x; //背景图像将在水平方向重复。
background-repeat:repeat-y; //背景图像将在垂直方向重复。
background-repeat:no-repeat; //背景图像将仅显示一次。
background -attachmentbackground-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.
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".
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%.
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%.
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☺
1.
Free css online video tutorialcss online manualphp.cnDugu Jiujian (2)-css video tutorialThe 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!