background 背景简写属性

实例代码

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS 背景效果演示</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 20px;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
        }

h1 {
            grid-column: 1 / -1;
            text-align: center;
            color: #333;
        }

.demo-box {
            height: 300px;
            border: 1px solid #ddd;
            border-radius: 8px;
            padding: 15px;
            display: flex;
            flex-direction: column;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }

.title {
            font-weight: bold;
            margin-bottom: 10px;
            text-align: center;
            background: rgba(255, 255, 255, 0.7);
            padding: 5px;
            border-radius: 4px;
        }

/* 单一颜色背景 */
        .solid-color {
            background: #f0f0f0;
        }

/* 图片背景 */
        .image-bg {
            background: url("/uploads/20250507/600.jpg") no-repeat center center / cover;
            color: white;
            text-shadow: 0 0 5px rgba(0, 0, 0, 0.7);
        }

/* 渐变背景 */
        .gradient-bg {
            background: linear-gradient(to bottom, #1e5799, #8373c9) fixed;
            color: white;
        }

/* 多重背景 */
        .multiple-bg {
            background:
                url("/uploads/20250507/1052-200x100.jpg") top left no-repeat,
                url("/uploads/20250507/1052-200x100.jpg") bottom right no-repeat,
                linear-gradient(to bottom, rgba(30, 87, 153, 0.5), rgba(32, 124, 202, 0.5));
            background-size: 100px, 100px, auto;
        }
    </style>
</head>

<body>
    <h1>CSS 背景效果演示</h1>

<div class="demo-box solid-color">
        <div class="title">单一颜色背景</div>
        <div class="code">background: #f0f0f0;</div>
        <p>这是一个简单的纯色背景示例，使用十六进制颜色代码。</p>
    </div>

<div class="demo-box image-bg">
        <div class="title">图片背景</div>
        <div class="code">background: url("image.png") no-repeat center center / cover;</div>
        <p>背景图片会居中显示并覆盖整个元素，保持比例不变形。</p>
    </div>

<div class="demo-box gradient-bg">
        <div class="title">渐变背景</div>
        <div class="code">background: linear-gradient(to bottom, #1e5799, #8373c9) fixed;</div>
        <p>从上到下的线性渐变背景，使用 fixed 属性使背景固定不随内容滚动。</p>
    </div>

<div class="demo-box multiple-bg">
        <div class="title">多重背景</div>
        <div class="code">
            background:<br>
              url("top-image.png") top left no-repeat,<br>
              url("bottom-image.png") bottom right no-repeat,<br>
              linear-gradient(to bottom, rgba(30,87,153,0.5), rgba(32,124,202,0.5));
        </div>
        <p>可以同时应用多个背景层，第一个背景在最上层，依此类推。</p>
    </div>
</body>

</html>