20. 高级背景

本节目标：掌握 background-size 的 contain 和 cover 用法，理解 origin 和 clip 的区别，能使用多重背景。

background-size —— 控制背景图大小

CSS3 之前，背景图只能按原始尺寸显示。现在可以精确控制它的大小。

固定尺寸

.bg {
    background-image: url('logo.png');
    background-size: 200px 100px; /* 宽 200px，高 100px */
}

百分比

.bg {
    background-size: 100% 100%; /* 拉伸填满整个元素 */
}

contain —— 等比缩放，完整显示

.contain-bg {
    background-image: url('photo.jpg');
    background-size: contain;
    background-repeat: no-repeat;
    /* 图片完整显示，但可能留空白 */
}

cover —— 等比缩放，填满容器

.cover-bg {
    background-image: url('photo.jpg');
    background-size: cover;
    /* 填满整个容器，但图片可能被裁切 */
}

contain 和 cover 的区别：contain 优先保证图片完整，cover 优先保证容器填满。

background-origin —— 背景定位区域

控制背景图从哪个区域开始定位。

.box {
    border: 10px dashed black;
    padding: 20px;
    background-image: url('pattern.png');
    background-repeat: no-repeat;
}

值	效果
`padding-box`	默认，从内边距区域开始
`border-box`	从边框区域开始
`content-box`	从内容区域开始

background-clip —— 背景绘制区域

控制背景（颜色或图片）的可见范围。

.clip-example {
    border: 10px dotted black;
    padding: 20px;
    background-color: lightblue;
    background-clip: padding-box; /* 背景只画到内边距边缘 */
}

值	效果
`border-box`	默认，背景延伸到边框下方
`padding-box`	背景到内边距边缘，边框下无背景
`content-box`	背景只在内容区域显示

origin 控制”从哪里开始定位”，clip 控制”画到哪里截止”。

多重背景

CSS3 允许一个元素设置多个背景图，用逗号分隔。先写的在最上面。

基本用法

.multi-bg {
    background-image: url('flower.png'), url('pattern.png');
    background-position: right bottom, left top;
    background-repeat: no-repeat, repeat;
}

简写写法

.multi-bg {
    background:
        url('flower.png') right bottom no-repeat,
        url('pattern.png') left top repeat;
}

渐变 + 图片叠加

.overlay-bg {
    background:
        linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
        url('photo.jpg') center/cover;
    /* 半透明渐变叠在图片上，增强文字可读性 */
}

实战：全屏背景图

<!DOCTYPE html>
<html lang="zh">
<head>
    <style>
        html {
            background: url('https://picsum.photos/1920/1080') no-repeat center fixed;
            background-size: cover;
            min-height: 100%;
        }
        body {
            margin: 0;
            min-height: 100vh;
        }
        .content {
            background: rgba(255, 255, 255, 0.9);
            max-width: 800px;
            margin: 60px auto;
            padding: 40px;
            border-radius: 8px;
        }
    </style>
</head>
<body>
    <div class="content">
        <h1>全屏背景图示例</h1>
        <p>背景图始终填满浏览器窗口，不随滚动条移动。</p>
    </div>
</body>
</html>

实战：带纹理的卡片

<!DOCTYPE html>
<html lang="zh">
<head>
    <style>
        .card {
            width: 300px;
            padding: 30px;
            border-radius: 12px;
            /* 多重背景：渐变 + 噪点纹理 */
            background:
                linear-gradient(135deg, rgba(102, 126, 234, 0.9), rgba(118, 75, 162, 0.9)),
                url('noise.png') repeat;
            color: white;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
        }
        .card h2 {
            margin: 0 0 10px;
        }
        .card p {
            margin: 0;
            opacity: 0.9;
            line-height: 1.6;
        }
    </style>
</head>
<body>
    <div class="card">
        <h2>渐变卡片</h2>
        <p>用渐变和纹理叠加，营造现代感的设计。</p>
    </div>
</body>
</html>

实战：背景剪裁文字效果

.text-clip {
    font-size: 72px;
    font-weight: bold;
    background-image: linear-gradient(135deg, #667eea, #764ba2);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    /* 文字变成渐变色的镂空效果 */
}

background-clip: text 需要配合 -webkit-background-clip: text 和 color: transparent 使用，浏览器兼容性需要前缀。

高级背景属性速查

属性	作用	常用值
`background-size`	背景图尺寸	cover / contain / 100% / 100px
`background-origin`	背景定位起点	border-box / padding-box / content-box
`background-clip`	背景绘制范围	border-box / padding-box / content-box / text

小结

background-size: cover 填满容器，contain 完整显示
background-origin 控制背景图从哪里开始定位
background-clip 控制背景画到哪里截止
多重背景用逗号分隔，先写的在上层
渐变和图片可以叠加使用