背景图片铺满全屏,记得加个斜杠 

background: url() no-repeat center / cover

 

属性详解: 

background:背景颜色 背景图片地址  背景平铺 背景图片滚动 背景图片位置

background:red url(img/bg.png) no-repeat fixed center top

番外:background-position的值

①值如果是方位名词,则两个值前后顺序无关,比如right center和center right 效果是等价的;

    如果只指定了一个方位名词,另一个值省略,则第二个值默认为center

/*background-position:cener right;*/
background-position:right center;

②值如果是精确单位,则第一个一定是x坐标,第二个一定是y坐标

   如果只指定了一个数值,那么该数值一定是x坐标,另一个默认垂直居中

background-position:20px 50px;

③ 值如果是混合单位,则第一个一定是x坐标,第二个一定是y坐标

background-position:20px center;

  一、背景色
        属性:background-color
        取值:
            任意合法颜色值
            transparent
        注意:
            背景颜色会填充到元素的内容区域,内边距区域以及边框区域
    二、背景图像
        属性:background-image
        取值:url(图像url)
        ex:background-image:url(a.jpg);
    三、背景平铺
        属性:background-repeat
        取值:
            1、repeat
                默认值,垂直和水平方向都平铺
            2、repeat-x
                横向平铺
            3、repeat-y
                纵向平铺
            4、no-repeat
                不平铺,仅显示一次
    四、背景图片尺寸
        属性:background-size
        取值:
            1、value1 value2
                具体数值,value1表示背景图像的宽度,value2表示背景图像的高度
            2、value1% value2%
                以元素的尺寸占比决定背景图的尺寸
            3、cover
                覆盖
                把背景图扩展至足够的大(等比缩放),直到背景图像完全覆盖到元素区域位置
            4、contain
                包含
                将背景图像等比缩放,直到右边或下边碰到元素边缘为止
    五、背景图片固定
        属性:background-attachment
        取值:
            1、scroll
                滚动,默认值
            2、fixed
                固定,将背景图保持在可视化区域内,不随着滚动条而发生变化
    六、背景图片位置
        属性:background-position
        取值:
            1、x y
                x :背景图像水平偏移位置
                    取值为正,向右移动
                    取值为负,向左移动
                y :背景图像垂直偏移位置
                    取值为正,向下偏移
                    取值为负,向上偏移
            2、x% y%
            3、
                x:left/center/right 替代
                y:top/center/bottom 替代

        CSS Sprites
            将若干幅小图像拼合到一副大图像中,想看具体小图像的时候,配合着背景图已经背景图像位置的方式进行移动,显示

            1、根据要看的图像,创建一个元素,该元素大小要与要看的图像大小一致。
            2、通过 背景图像以及背景图像位置 移动背景图到 显示的元素中
    七、背景属性-简写属性
        background:color url() repeat attachment position;

        注意:属性值可以省略,省略的话将采用默认值

        background:red;

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐