CSS 背景属性(Background)

背景

1、背景颜色
2、背景图片

平铺  background-repeat: no-repeat     repeat-x   repeat-y
位置  background-position:  x值 y值;    right  center  bottom(y)  left  top(y)      
     正值 负值      选择照片特定的图像

3、滚动

background-attachment:fixed(固定)    scroll(滚动)

4、尺寸

background-size   宽  高    ;只指定一个值,另外一个等比例缩放
关键字     contain     优先显示完整图片     cover    优先铺满这个元素

5、 背景图的位置:

     background-position:
        第一个值代表图片在X轴方向上的位置
        第二个值代表图片在Y轴方向上的位置(注意在这里Y轴向下是正方向)

        还可以用方向关键字来描述背景图片的位置  center

        x  left right center
        y  top  bottom center
        用具体的数字  可以用正值 也可以用负值

        当我们去指定背景图片的位置,只指定一个值的时候,另一个值默认为center

5、linear-gradient 线性渐变

第一个参数[可选]
    <side or corner>?
    case:
        to left   从右到左
        to right  从左到右
        to top right  从左下角到右上角
    angle
    case:
        45deg 两个颜色的交界线大约是45度;

后面的参数[两个或多个]
    color <color-stop>?
    case:
        red
        red 50%

6、background-repeat 重复背景图像

repeat-y       只有垂直位置会重复背景图像
repeat-x	   只有水平位置会重复背景图像
no-repeat	   不会重复

猜你喜欢

转载自blog.csdn.net/o_jj_o/article/details/85718739