CSS背景图设置

一、背景图设置
使用背景图片，设置为全屏
方式1：全部使用background设置

    body{
            background-image: url(bg.jpg);
            background-size: 100% 100%;
            background-repeat: no-repeat;
            background-attachment: fixed;
        }

背景图片
背景尺寸
背景图是否重复
背景是否滚动
方式2：使用宽高

        body {
            width: 100%;
            height: 100%;
            background: url(img/bg.jpg) no-repeat;          
        }

方式3：使用边距

        body {
                padding: 0;
                margin: 0;
                background: url(img/bg.png);
        }

CSS背景知识点

1、background-color -- 背景色,定义背景的颜色

<color>: 颜色表示法
transparent: 透明
inherit: 继承

2、background-image -- 定义背景图片

<uri>: URI
none: 无

3、background-repeat -- 定义背景图片的重复方式

repeat: 平铺整个页面,左右与上下
repeat-x: 在x轴上平铺,左右
repeat-y: 在y轴上平铺,上下
no-repeat: 图片不重复

4、background-position -- 定义背景图片的位置

1、水平
left: 左
center: 中
right: 右
2、垂直
top: 上
center: 中
bottom: 下
3、垂直与水平的组合
x-% y-%
x-pos y-pos
inherit: 继承

p { 
    background-image:url('list-orange.png');
    background-position:right bottom ;
    background-repeat:no-repeat;
}   
div { 
    background-image:url('list-orange.png');
    background-position:50% 20% ;
    background-repeat:no-repeat;
}

5、background-attachment -- 定义背景图片随滚动轴的移动方式

取值: scroll | fixed | inherit
scroll: 随着页面的滚动轴背景图片将移动
fixed: 随着页面的滚动轴背景图片不会移动
inherit: 继承
初始值: scroll

最后编辑于：2017.12.08 21:16:32

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

CSS背景图设置