CSS中background的用法

云俊美
2023-12-01

CSS中  background 是一个很基本的而且比较常用的样式 

background : background-color || background-image || background-repeat || background-attachment || background-size || background-clip || background-position 

这个是 background 的几个参数,这些参数并不是都要写上的。 

1.background-color: 背景颜色,这里可以写英文,可以写RGB,可以写#xxxxxx 
                   transparent :  背景色透明 

2.background-image:背景图片,只能写 none 或者 url (url) 

3.background-repeat:背景图象的平铺 
                   repeat :  背景图像在纵向和横向上平铺 
                   no-repeat :  背景图像不平铺 
                   repeat-x :  背景图像在横向上平铺 
                   repeat-y :  背景图像在纵向平铺 

4.background-attachment:背景图象的流动性 
                       scroll :  背景图像是随对象内容滚动 
                       fixed :  背景图像固定 

 

5.background-size : 背景图片尺寸属性

                  length :  可以是尺寸  

                  percentage  : 百分比

                  auto  : 自动(默认值)

                  cover  : 按比例调整背景图片,这个属性值跟contain正好相反,背景图片会按照比如自适应铺满整个背景区域。假如背景区域不足以包含背景图片的话,那么背景图片就会被咔嚓。覆盖,背景要覆盖元素的所有区域,不能有空白出现。

                  contain  : 按比例调整背景图片,使得其图片宽高比自适应整个元素的背景区域的宽高比,因此假如指定的图片尺寸过大,而背景区域的整体宽高不能恰好包含背景图片的话,那么其背景某些区域可能会有空白。包含,整个背景图都要被包含在元素内,没有超出的部分。

 

6.background-origin :该属性指定了背景从哪个区域(边框、补白或内容)开始绘制

                   padding :  背景从内边距开始绘制

                   border  :  背景从边框开始绘制

                   content  :  背景从内容开始绘制

 

7.background-clip :该属性指定了背景在哪些区域可以显示,但与背景开始绘制的位置无关

                   padding :  背景在内边距区域显示

                   border  :  背景在边框区域显示

                   content  :  背景在内容区域显示


8.background-position :背景图象的位置 
                      length :  百分数 | 由浮点数字和单位标识符组成的长度值。 
                      position :  top | center | bottom | left | center | right 

background-position 这个参数很有意思,一般可能很少人用到,不过这个参数理解好了,确实有很大的用处,首先background-position有2个参数:background-position:(X Y),这个一般有2种情况,一个是div比背景图片大,则用这个属性背景图片会在div里浮动,如div比背景图片小,那么就变成了背景图片的变幻,具体的用代码说明吧。 

这个是做的一个圆角的div, 
<div style="width:700px"> 
    <div style="padding-left:8px; background:transparent url(img/corners.gif) no-repeat;"> 
        <div style="background:transparent url(img/corners.gif) no-repeat right -8px; padding-right:8px;"> 
            <div style="height:8px;background:transparent url(img/tb.gif) repeat-x 0 0;" ></div> 
        </div> 
    </div> 
    <div style="padding-left:4px; background:transparent url(img/l.gif) repeat-y;"> 
        <div style="padding-right:4px;background:transparent url(img/r.gif) repeat-y right;"> 
            <div style="background:#eee url(img/tb.gif) repeat-x 0 -16px;">fdsafasdfasd<br />fdsafasdfasdfasdf<br />fdsafasdfasdfasdf<br />fdsafasdfasdfasdf<br />fdsafasdfasdfasdf<br />fdsafasdfasdfasdf<br />fdsafasdfasdfasdf<br />fdsafasdfasdfasdf<br />fdsafasdfasdfasdf<br />fdsafasdfasdfasdf</div> 
        </div> 
    </div> 
    <div style="padding-left:8px; background:transparent url(img/corners.gif) no-repeat 0 -16px;"> 
        <div style="background:transparent url(img/corners.gif) no-repeat right -24px; padding-right:8px;"> 
            <div style="height:8px;background:transparent url(img/tb.gif) repeat-x 0 -8px;" ></div> 
        </div> 
    </div> 
</div>

转载于:https://www.cnblogs.com/sheshou/p/5202947.html

 类似资料: