第7话：粉刷 - CSS 漫画大冒险

空荡的房间

🏗️

The Builder (建筑师):
房子盖好了，但是... 墙壁是白色的，地板是白色的。
这看起来像个未完工的仓库，而不是国王的宫殿。

🦊

Little Fox (小狐狸):
好无聊啊！我要在这墙上乱涂乱画！
我要画一只小猪佩奇！

🧑‍🦱

Young David (少年大卫):
别急。我们要用色彩和图像来装饰这所房子，使它变得华丽。

宫殿的色彩

#ff0055 (Solid)

皇家红毯

Linear Gradient

晨曦的云彩

🧑‍🦱

Young David (少年大卫):
我们可以用纯色 (Color)，也可以用图像 (Image)。
甚至可以让背景像黄金一样铺满，或者像雕像一样固定不动。

装饰的法则

1. 基础粉刷

body {
    background-color: #87CEEB; /* 天蓝色 */
    background-image: url('cloud.png'); /* 贴图 */
}

2. 进阶控制

div {
    background-repeat: no-repeat; /* 不要重复，独一无二 */
    background-position: center;  /* 居中放置，尊贵显赫 */
    background-size: cover;       /* 充满视野 */
}

智慧的简写 (Shorthand):
你可以把所有属性写在一行里，像一句利落的口令：
background: #fff url("img.png") no-repeat right top;

⚔️ 操练场 (Training Ground)

任务： 给国王的披风涂上颜色。

目标：把 div 的背景颜色设为 gold (金色)，并让背景图片 no-repeat (不重复)。

div {
background-color: ;
background-repeat: ;
}

🏗️ 建造工坊 (Workshop)

实战：打造一个“荣耀按钮”

大卫要为城堡的大门做一个金色的按钮。请跟着步骤，一步步打造它！

STEP 1 基础形态 (Base)

先给它一个形状和底色。

.glory-btn {
    padding: 15px 30px;
    border: none;
    border-radius: 50px; /* 圆角 */
    background-color: #ffd700; /* 金色 */
    color: #5c3a00; /* 深褐色文字 */
    font-weight: bold;
    font-size: 1.2rem;
    cursor: pointer;
}

STEP 2 注入光辉 (Gradient)

使用 linear-gradient 让它闪闪发光！

.glory-btn {
    /* 从上到下的渐变：浅金 -> 深金 */
    background-image: linear-gradient(to bottom, #fff2cc, #ffd700);
    
    /* 给文字加一点阴影，更有立体感 */
    text-shadow: 0 1px 0 rgba(255,255,255,0.5);
}

STEP 3 最终效果 (Result)