background属性的使用

background是一个简写属性。用来设置背景属性。

有如下属性:

background-color:   设置背景色。为元素设置一种纯色。这种颜色会填充元素的内容、内边距和边框区域,扩展到元素边框的外

                                边界(但不包括外边距)。如果边框有透明部分(如虚线边框),会透过这些透明部分显示出背景色。

                                可能是值:

                                                     color_name: 规定颜色值为颜色名称的背景颜色(比如 red)。

                                                     hex_number: 规定颜色值为十六进制值的背景颜色(比如 #ff0000)。

                                                     rgb_number:  规定颜色值为 rgb 代码的背景颜色(比如 rgb(255,0,0))

                                                     transparent:  默认。背景颜色为透明。

background-position:  设置背景图像的起始位置,背景图像如果要重复,将从这一点开始。

                                   可能是值:

扫描二维码关注公众号,回复: 5858954 查看本文章

                                                     top left/top center/top right/center left/center center/center right/bottom left/

                                                     bottom center/bottom right      如果您仅规定了一个关键词,那么第二个值将是"center"

                                                     x% y%:     第一个值是水平位置,第二个值是垂直位置。

                                                                      左上角是 0% 0%。右下角是 100% 100%。

                                                                      如果仅规定了一个值,另一个值将是 50%。

                                                     xpos ypos:      第一个值是水平位置,第二个值是垂直位置。

                                                                            左上角是 0 0。单位是像素 (0px 0px) 或任何其他的 CSS 单位。

                                                                            如果仅规定了一个值,另一个值将是50%。

                                                                            可以混合使用 % 和 position 值。

background-size:  规定背景图像的尺寸

                              可能是值:

                                                     length: 设置背景图像的高度和宽度。第一个值设置宽度,第二个值设置高度。如果只设置一个

                                                                值,则第二个值会被设置为 "auto"。

                                                     percentage:      以父元素的百分比来设置背景图像的宽度和高度。

                                                                              第一个值设置宽度,第二个值设置高度。

                                                                              如果只设置一个值,则第二个值会被设置为 "auto"。

                                                     cover:         把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。

                                                                       背景图像的某些部分也许无法显示在背景定位区域中。

                                                     contain       把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域。

background-orgin:    规定背景图像相对于什么位置来定位

                                   可能是值:

                                                     padding-box :   图像相对于内边距定位

                                                     border-box:  图像相对于边框来定位

                                                     content-box:   图像相对于内容区域来定位

background-repeat:    规定如何重复背景图像

                                   可能是值:

                                                     repeat:  背景图像将在水平方向和垂直方向重复

                                                     repeat-x:   背景图像将在水平方向上重复

                                                     repeat-y:   背景图像将在垂直方向上重复

                                                     no-repeat:  背景图将只显示一次

background-clip:   规定背景的绘制区域

                             可能是值:

                                                     border-box:  背景图剪切到边框区域

                                                     padding-box:  背景图被剪切到内边距框

                                                     content-box:  背景图被剪切到内容区域

background-attachment:    规定背景图像是否随着页面的其余部分滚动或固定

                                          可能是值:

                                                     scroll:背景图像随着页面其余部分的滚动而滚动

                                                     fixed: 当页面的其余部分滚动时,不随着滚动  

background-image:    规定背景图片。

                                   可能是值:

                                                     url(URL) :图像的路径

                                                     none:  默认值,不显示背景图

inherit:   规定应该从父元素继承 background 属性的设置。

猜你喜欢

转载自blog.csdn.net/qq_29704567/article/details/89219632