CSS背景设置_css 背景色-CSDN博客

本文介绍了通过CSS背景属性给页面元素添加背景样式的方法。涵盖背景颜色、图片、平铺、位置等属性设置，还提及精确单位、混合单位使用，固定背景图片、样式合写及背景颜色半透明等内容，同时给出vscode快捷键及注意事项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

通过CSS背景属性，可以给页面元素添加背景样式

一、背景颜色

background-color 定义元素的背景颜色

在vscode中可以简写快捷键：bgc+回车

PS：元素背景颜色默认值为：transparent（透明）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>背景颜色</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            /* background-color: transparent;   透明的 清澈的  */
            /* background-color: red; */
            background-color: pink;
        }
    </style>
</head>

<body>
    <div></div>
</body>
</html>

二、背景图片

background-image 定义元素的背景图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>背景图片</title>
    <style>
        div {
            width: 300px;
            height: 300px;
            /* 不要落下 url()   */
            background-image: url(th\ \(1\).jpg);
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

其他说明：

实际开发常见于 logo 或者一些装饰性的小图片或者是超大的背景图片, 优点是非常便于控制位置. (精灵图也是一种运用场景)

注意：背景图片后面的地址，千万不要忘记加 URL，同时里面的路径不要加引号。

三、背景平铺

background-repeat 设置元素背景图像的平铺

为了方便演示，我给图片添加了边框和外边距，来显示div盒子的大小

1、背景图片不平铺

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>背景图片平铺</title>
    <style>
        div {
            margin: 100px 500px;
            border: 20px solid blueviolet;
            width: 600px;
            height: 300px;
            background-color: pink;
            background-image: url(th\ \(1\).jpg);
            /* 1.背景图片不平铺 */
            background-repeat: no-repeat;
            /* 2.默认的情况下,背景图片是平铺的 */
            /* background-repeat: repeat; */
            /* 3. 沿着x轴平铺 */
            /* background-repeat: repeat-x;  */
            /* 4. 沿着Y轴平铺 */
            /* background-repeat: repeat-y; */
            /* 页面元素既可以添加背景颜色也可以添加背景图片 只不过背景图片会压住背景颜色 */
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

2、背景图片沿着y轴平铺

    <style>
        div {
            margin: 100px 500px;
            border: 20px solid blueviolet;
            width: 600px;
            height: 300px;
            background-color: pink;
            background-image: url(th\ \(1\).jpg);
            /* 1.背景图片不平铺 */
            /* background-repeat: no-repeat; */
            /* 2.默认的情况下,背景图片是平铺的 */
            /* background-repeat: repeat; */
            /* 3. 沿着x轴平铺 */
            /* background-repeat: repeat-x;  */
            /* 4. 沿着Y轴平铺 */
            background-repeat: repeat-y;
            /* 页面元素既可以添加背景颜色也可以添加背景图片 只不过背景图片会压住背景颜色 */
        }
    </style>

3、背景颜色沿着x轴平铺

    <style>
        div {
            margin: 100px 500px;
            border: 20px solid blueviolet;
            width: 600px;
            height: 300px;
            background-color: pink;
            background-image: url(th\ \(1\).jpg);
            /* 1.背景图片不平铺 */
            /* background-repeat: no-repeat; */
            /* 2.默认的情况下,背景图片是平铺的 */
            /* background-repeat: repeat; */
            /* 3. 沿着x轴平铺 */
            background-repeat: repeat-x; 
            /* 4. 沿着Y轴平铺 */
            /* background-repeat: repeat-y; */
            /* 页面元素既可以添加背景颜色也可以添加背景图片 只不过背景图片会压住背景颜色 */
        }
    </style>

4、背景图片平铺

    <style>
        div {
            margin: 100px 500px;
            border: 20px solid blueviolet;
            width: 600px;
            height: 300px;
            background-color: pink;
            background-image: url(th\ \(1\).jpg);
            /* 1.背景图片不平铺 */
            /* background-repeat: no-repeat; */
            /* 2.默认的情况下,背景图片是平铺的 */
            background-repeat: repeat;
            /* 3. 沿着x轴平铺 */
            /* background-repeat: repeat-x;  */
            /* 4. 沿着Y轴平铺 */
            /* background-repeat: repeat-y; */
            /* 页面元素既可以添加背景颜色也可以添加背景图片 只不过背景图片会压住背景颜色 */
        }
    </style>

四、背景图片位置

background-position 属性可以改变图片在背景中的位置

参数代表的意思是：x 坐标和 y 坐标。可以使用方位名词或者精确单位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>背景位置-方位名词</title>
    <style>
        h3 {
            margin: 300px auto;
            width: 118px;
            height: 40px;
            background-color: pink;
            font-size: 14px;
            font-weight: 400;
            line-height: 40px;
            background-image: url(icon.png);
            background-repeat: no-repeat;
            background-position: left center;
            text-indent: 1.5em;
        }
    </style>
</head>
<body>
    <h3>
        成长守护平台
    </h3>
</body>
</html>

其他说明：

1、参数是方位名词

如果指定的两个值都是方位名词，则两个值前后顺序无关，比如 left top 和 top left 效果一致

如果只指定了一个方位名词，另一个值省略，则第二个值默认居中对齐

2、参数是精确单位

如果参数值是精确坐标，那么第一个肯定是 x 坐标，第二个一定是 y 坐标

如果只指定一个数值，那该数值一定是 x 坐标，另一个默认垂直居中

3、参数是混合单位

如果指定的两个值是精确单位和方位名词混合使用，则第一个值是 x 坐标，第二个值是 y 坐标

五、精确单位

background-position

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>背景位置-方位名词</title>
    <style>
    div {
        width: 300px;
            height: 300px;
            background-color: pink;
            background-image: url(images/logo.png);
            background-repeat: no-repeat;
            /* 20px 50px; x轴一定是 20  y轴一定是 50 */
            /* background-position: 20px 50px; */
            /* background-position: 50px 20px; */
            background-position: 20px;
    }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

六、混合单位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>背景位置-方位名词</title>
    <style>
       div {
            width: 300px;
            height: 300px;
            background-color: pink;
            background-image: url(images/logo.png);
            background-repeat: no-repeat;
            /* 20px center  一定是x 为 20  y 是 center  等价于   background-position: 20px */
            /* background-position: 20px center; */
            /* 水平是居中对齐  垂直是 20 */
            background-position: center 20px;

        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

七、固定背景图片

background-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>背景位置-方位名词</title>
    <style>
        body {
            background-image: url(images/bg.jpg);
            background-repeat: no-repeat;
            background-position: center top;
            /* 把背景图片固定住 */
            background-attachment: fixed;
            color: #fff;
            font-size: 20px;
        }
    </style>
</head>

<body>
    <p>天王盖地虎, 大奉打更人</p>
    <p>天王盖地虎, 大奉打更人</p>
    <p>天王盖地虎, 大奉打更人</p>
    <p>天王盖地虎, 大奉打更人</p>
    <p>天王盖地虎, 大奉打更人</p>
    <p>天王盖地虎, 大奉打更人</p>
    <p>天王盖地虎, 大奉打更人</p>
    <p>天王盖地虎, 大奉打更人</p>
    <p>天王盖地虎, 大奉打更人</p>
    <p>天王盖地虎, 大奉打更人</p>
    <p>天王盖地虎, 大奉打更人</p>
    <p>天王盖地虎, 大奉打更人</p>
    <p>天王盖地虎, 大奉打更人</p>
    <p>天王盖地虎, 大奉打更人</p>
    <p>天王盖地虎, 大奉打更人</p>
    <p>天王盖地虎, 大奉打更人</p>
    <p>天王盖地虎, 大奉打更人</p>
    <p>天王盖地虎, 大奉打更人</p>
    <p>天王盖地虎, 大奉打更人</p>
    <p>天王盖地虎, 大奉打更人</p>
    <p>天王盖地虎, 大奉打更人</p>
    <p>天王盖地虎, 大奉打更人</p>
    <p>天王盖地虎, 大奉打更人</p>
    <p>天王盖地虎, 大奉打更人</p>
    <p>天王盖地虎, 大奉打更人</p>
    <p>天王盖地虎, 大奉打更人</p>
    <p>天王盖地虎, 大奉打更人</p>
    <p>天王盖地虎, 大奉打更人</p>
    <p>天王盖地虎, 大奉打更人</p>
    <p>天王盖地虎, 大奉打更人</p>
    <p>天王盖地虎, 大奉打更人</p>
    <p>天王盖地虎, 大奉打更人</p>
    <p>天王盖地虎, 大奉打更人</p>
    <p>天王盖地虎, 大奉打更人</p>
    <p>天王盖地虎, 大奉打更人</p>
    <p>天王盖地虎, 大奉打更人</p>
    <p>天王盖地虎, 大奉打更人</p>
    <p>天王盖地虎, 大奉打更人</p>
    <p>天王盖地虎, 大奉打更人</p>
    <p>天王盖地虎, 大奉打更人</p>
    <p>天王盖地虎, 大奉打更人</p>
    <p>天王盖地虎, 大奉打更人</p>
    <p>天王盖地虎, 大奉打更人</p>
    <p>天王盖地虎, 大奉打更人</p>
    <p>天王盖地虎, 大奉打更人</p>
    <p>天王盖地虎, 大奉打更人</p>
    <p>天王盖地虎, 大奉打更人</p>
    <p>天王盖地虎, 大奉打更人</p>
    <p>天王盖地虎, 大奉打更人</p>
    <p>天王盖地虎, 大奉打更人</p>
    <p>天王盖地虎, 大奉打更人</p>
    <p>天王盖地虎, 大奉打更人</p>
    <p>天王盖地虎, 大奉打更人</p>
    <p>天王盖地虎, 大奉打更人</p>
    <p>天王盖地虎, 大奉打更人</p>
</body>
</html>

其他说明：

background-attachment 后期可以制作视差滚动的效果。

八、背景样式合写

background: 背景颜色背景图片地址背景平铺背景图像滚动背景图片位置;

    <style>
        body {
            /* background-image: url(images/bg.jpg);
            background-repeat: no-repeat;
            background-position: center top; */
            /* 把背景图片固定住 */
            /* background-attachment: fixed;
            background-color: black; */
            background: black url(images/bg.jpg) no-repeat fixed center top;
            color: #fff;
            font-size: 20px;
        }
    </style>

九、背景颜色半透明

最后一个参数是 alpha 透明度，取值范围在 0~1之间

习惯将0去掉，直接写小数点后面的数字，如0.3可以直接写为 .3

背景半透明是指盒子背景半透明，盒子里面的内容不受影响
CSS3 新增属性，是 IE9+ 版本浏览器才支持的，但是现在实际开发,我们不太关注兼容性写法了,可以放心使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>背景色透明写法</title>
    <style>
        div {
            width: 300px;
            height: 300px;
            /* background-color: black; */
            /* background: rgba(0, 0, 0, 0.3); */
            background: rgba(0, 0, 0, .3);
        }
    </style>
</head>
<body>
    <div>隐形的翅膀</div>
</body>
</html>

CSS背景设置