background-color 背景颜色

实例代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS background-color 演示</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 20px;
            line-height: 1.6;
        }
        
        h1 {
            color: #333;
            text-align: center;
        }
        
        .example-box {
            width: 90%;
            margin: 15px auto;
            padding: 20px;
            border: 1px solid #ddd;
            border-radius: 5px;
        }
        
        .code {
            background-color: #f5f5f5;
            padding: 10px;
            border-radius: 3px;
            font-family: monospace;
            margin: 10px 0;
        }
        
        /* 使用颜色名称 */
        .example1 {
            background-color: lightblue;
        }
        
        /* 使用十六进制值 */
        .example2 {
            background-color: #e0e0e0;
        }
        
        /* 使用RGB值 */
        .example3 {
            background-color: rgb(200, 200, 200);
        }
        
        /* 使用RGBA值（带透明度） */
        .example4 {
            background-color: rgba(0, 0, 255, 0.3);
        }
        
        /* 透明背景 */
        .example5 {
            background-color: transparent;
            border: 2px dashed #999;
        }
        
        /* 背景颜色+背景图片 */
        .example6 {
            background: #f0f0f0 url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><circle cx="50" cy="50" r="40" fill="none" stroke="%23aaa" stroke-width="2"/></svg>') no-repeat center;
            height: 150px;
        }
    </style>
</head>
<body>
    <h1>CSS background-color 演示</h1>
    
    <div class="example-box example1">
        <h2>1. 使用颜色名称</h2>
        <p>这个例子使用颜色名称 "lightblue" 设置背景。</p>
        <div class="code">background-color: lightblue;</div>
    </div>
    
    <div class="example-box example2">
        <h2>2. 使用十六进制值</h2>
        <p>这个例子使用十六进制值 "#e0e0e0" 设置背景。</p>
        <div class="code">background-color: #e0e0e0;</div>
    </div>
    
    <div class="example-box example3">
        <h2>3. 使用RGB值</h2>
        <p>这个例子使用RGB值 rgb(200, 200, 200) 设置背景。</p>
        <div class="code">background-color: rgb(200, 200, 200);</div>
    </div>
    
    <div class="example-box example4">
        <h2>4. 使用RGBA值（带透明度）</h2>
        <p>这个例子使用RGBA值 rgba(0, 0, 255, 0.3) 设置半透明蓝色背景。</p>
        <div class="code">background-color: rgba(0, 0, 255, 0.3);</div>
    </div>
    
    <div class="example-box example5">
        <h2>5. 透明背景</h2>
        <p>这个例子使用 transparent 设置透明背景（默认值）。</p>
        <div class="code">background-color: transparent;</div>
    </div>
    
    <div class="example-box example6">
        <h2>6. 背景颜色+背景图片</h2>
        <p>这个例子使用 background 简写属性同时设置背景颜色和背景图片。</p>
        <div class="code">background: #f0f0f0 url("image.png") no-repeat center;</div>
        <p>注意：这里使用了一个内联SVG作为示例图像。</p>
    </div>
</body>
</html>