04_CSS 背景相关属性

背景颜色_background-color

/* 默认背景色是透明；背景色在背景图之下*/
background-color: transparent;

背景图片_background-image

background-image: url(图片路径);
 

示例：

<style>
    .box {
        width: 100%;
        /* 元素必须给一个尺寸才能显示背景图 */
        height: 500px;
        background-image: url(https://cn.bing.com/th?id=OHR.FanjingStairs_ZH-CN0360402048_UHD.jpg&rf=LaDigue_UHD.jpg&w=300&h=300&c=8&rs=1&o=3&r=0);
    }
</style>

<div class="box"></div>

背景重复_background-repeat

background-repeat

取值	效果
repeat	（默认值）水平和垂直方向都平铺
no-repeat	不平铺
repeat-x	水平方向平铺（x 轴）
repeat-y	垂直方向平铺（y 轴）

示例：

<style>
    .box {
        width: 100%;
        /* 元素必须给一个尺寸才能显示背景图 */
        height: 500px;
        background-image: url(https://cn.bing.com/th?id=OHR.FanjingStairs_ZH-CN0360402048_UHD.jpg&rf=LaDigue_UHD.jpg&w=300&h=300&c=8&rs=1&o=3&r=0);
        background-repeat: no-repeat;
    }
</style>

<div class="box"></div>

背景位置_background-position

background-position: 水平方向位置 垂直方向位置;
 

属性值

方位名词（最多只能表示 9 个位置）

• 水平方向：left center right
• 垂直方向：top center bottom

数字+px（坐标）

• 坐标轴 原点(0,0) 盒子的左上角
• x 轴 水平方向
• y 轴 垂直方向
• 图片左上角与坐标原点重合

示例：

<style>
    .box {
        width: 100%;
        /* 元素必须给一个尺寸才能显示背景图 */
        height: 500px;
        background-image: url(https://cn.bing.com/th?id=OHR.FanjingStairs_ZH-CN0360402048_UHD.jpg&rf=LaDigue_UHD.jpg&w=300&h=300&c=8&rs=1&o=3&r=0);
        background-repeat: no-repeat;
        background-position: center;
    }
</style>

<div class="box"></div>

背景属性连写

/* 不分先后顺序 */
background: color image repeat position;
 

示例：

<style>
    .box {
        width: 100%;
        /* 元素必须给一个尺寸才能显示背景图 */
        height: 500px;
        /*
        两种写法等价
        background-color: #fff;
        background-image: url(https://cn.bing.com/th?id=OHR.FanjingStairs_ZH-CN0360402048_UHD.jpg&rf=LaDigue_UHD.jpg&w=300&h=300&c=8&rs=1&o=3&r=0);
        background-repeat: no-repeat;
        background-position: center;
        */
        background: #fff url(https://cn.bing.com/th?id=OHR.FanjingStairs_ZH-CN0360402048_UHD.jpg&rf=LaDigue_UHD.jpg&w=300&h=300&c=8&rs=1&o=3&r=0) no-repeat center;
    }
</style>

<div class="box"></div>

img 标签和背景图片区别

img

• 不设置高宽会默认显示
• 重要突出的图使用 img

background-image

• 需要设置元素尺寸
• 装饰性图片使用背景图