/* 默认背景色是透明;背景色在背景图之下*/
background-color: transparent;
示例:
<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
示例:
<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
属性值
方位名词(最多只能表示 9 个位置)
数字+px(坐标)
示例:
<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>
示例:
<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
background-image