CSS 背景属性相关
背景颜色
/* 默认背景色是透明;背景色在背景图之下*/
background-color: transparent;
背景图片
background-image: url(图片路径);
示例:
<style>
.box {
width: 100%;
/* 元素必须给一个尺寸才能显示背景图 */
height: 500px;
background-image: url();
}
</style>
<div class="box"></div>
背景平铺
background-repeat
取值 | 效果 |
---|---|
repeat | (默认值)水平和垂直方向都平铺 |
no-repeat | 不平铺 |
repeat-x | 水平方向平铺(x 轴) |
repeat-y | 水平方向平铺(x 轴) |
<style>
.box {
width: 100%;
/* 元素必须给一个尺寸才能显示背景图 */
height: 500px;
background-image: url();
background-repeat: no-repeat;
}
</style>
<div class="box"></div>
背景位置
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();
background-repeat: no-repeat;
background-position: center;
*/
background: #fff url(图片地址&rf=LaDigue_UHD.jpg&w=300&h=300&c=8&rs=1&o=3&r=0) no-repeat center;
}
</style>
<div class="box"></div>