CSS3 背景
CSS3 新增了多个背景相关的属性，增强了背景的控制能力，以下是一些主要的 CSS3 新增背景属性：
background-clip：控制背景的绘制区域（背景延伸到何处）。background-origin：控制背景的定位区域（背景从何处开始计算位置）。background-size：控制背景图片的尺寸。
CSS3 background-clip 属性
CSS3 中background-clip属性，用于控制背景的绘制区域（背景延伸到何处）。
/* 默认值，背景延伸到边框外边缘 */
.border-box {
background-clip: border-box;
}
/* 背景延伸到内边距外边缘，不包含边框 */
.padding-box {
background-clip: padding-box;
}
/* 背景仅延伸到内容区域 */
.content-box {
background-clip: content-box;
}实现的效果：
默认值，背景延伸到边框外边缘
背景延伸到内边距外边缘，不包含边框
背景仅延伸到内容区域
CSS3 background-origin 属性
CSS3 中background-origin属性，用于控制背景的定位区域（背景从何处开始计算位置）。
/* 默认值，背景相对于内边距框定位 */
.padding-box {
background-origin: border-box;
}
/* 背景相对于边框盒定位 */
.border-box {
background-origin: padding-box;
}
/* 背景相对于内容框定位 */
.content-box {
background-origin: content-box;
}实现的效果：
默认值，背景相对于内边距框定位
背景相对于边框盒定位
背景相对于内容框定位
CSS3 background-size 属性
CSS3 中background-size属性，用于控制控制背景图片的尺寸。
/* 默认值，保持图片原始尺寸 */
.example1 {
background-size: auto;
}
/* 缩放图片以完全覆盖背景区域（可能裁剪部分图片） */
.example2 {
background-size: cover;
}
/* 缩放图片以适应背景区域（可能留白） */
.example3 {
background-size: contain;
}实现的效果：
auto（原始尺寸）
cover（完全覆盖）
contain（适应区域）
评论区 0
发表评论
教程介绍
CSS3 是 CSS 技术的版本升级，在 CSS 基础上进行了扩展改进，引入了新的特性和模块。
36
章节
73
阅读
0
评论
反馈提交成功
感谢您的反馈，我们将尽快处理您的反馈