一、背景图片(background-image)
1.1 使用背景图片
element {
background-image: url('image-source');
}
1.2 背景图片大小(background-size)
element {
background-size: cover; /* 保持图片宽高比,完全覆盖元素 */
background-size: contain; /* 保持图片宽高比,使图片完全适应元素 */
background-size: 100% 100%; /* 设置图片宽高为元素的100% */
}
二、背景重复(background-repeat)
2.1 控制背景图片的重复
element {
background-repeat: no-repeat; /* 不重复 */
background-repeat: repeat; /* 水平和垂直方向重复 */
background-repeat: repeat-x; /* 水平方向重复 */
background-repeat: repeat-y; /* 垂直方向重复 */
}
三、背景位置(background-position)
3.1 设置背景图片的位置
element {
background-position: top left; /* 设置为左上角 */
background-position: bottom right; /* 设置为右下角 */
background-position: center; /* 设置为居中 */
background-position: 50% 50%; /* 设置为元素中心 */
}
四、背景颜色(background-color)
4.1 设置背景颜色
element {
background-color: #fff; /* 设置为白色 */
}
五、透明度(background-opacity)
5.1 设置背景图片的透明度
element {
background-color: rgba(255, 255, 255, 0.5); /* 设置背景颜色为半透明 */
}
使用rgba
颜色模式可以设置背景颜色的透明度。
六、综合示例
.container {
background-image: url('background.jpg');
background-color: rgba(0, 0, 0, 0.2); /* 半透明的黑色 */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}