CSS 背景 background属性 8-26_background-color: #ffffff;-优快云博客

本文详细介绍了CSS中的背景属性，包括背景色、背景图、背景重复、背景定位、背景大小及组合使用方法。并通过实例展示了如何设置div元素的背景，以及如何使用背景缩写语法简化代码。

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

一、background-color: ; 背景色

1. 可以写色相、颜色；（比如red (红色)、blue (蓝色)）

2. 可以写颜色编码；（比如：#ffffff）

3. 可以写RGBA，A透明度的百分比（范围0-1），0.5就是半透明 background-color：189,162,143,0.5

4. 直接写RGB 数值；

二、 background-image：url(图片的路径)；背景图

三、 background-repeat：背景重复

四、 background-position：；背景定位 X轴 Y轴，可以写正负值、百分比、px和方位词；

如果：background-position：100；意思是图片X轴从左往右移动100，Y轴默认居中 center。

五、 background-size ：；背景图片的大小（可以写百分比、像素）

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css样式</title>
    <style>
        .box {
            width: 3000px; /*盒子的宽度*/
            height: 3000px;/*盒子的高度*/
            background-color: pink;  /*盒子的背景颜色*/
            background-image: url(02.jpg);  /*盒子的背景图片*/
            background-repeat: no-repeat;  /*背景图片是否重复：不重复*/
            background-position: 200px 500px;  /*背景图定位 X轴从左往右 200px。Y轴从上往下500px；Y轴不写的话默认center 居中,Y轴如果不想居中的话 直接写 0 就可以了*/
            background-size: 30%;  /*背景图的大小，以盒子的大小为依据，进行百分比缩放*/
        }
    </style>
</head>
<body>
    <div class="box">
        
    </div>
</body>
</html>

六、 background的缩写：

background：颜色图片是否重复定位/尺寸大小 (中间用空格隔开)；

刚刚上面的例子就可以写：background：pink url(02.jpg) no-repeat 200px 500px/30%;

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css样式</title>
    <style>
        .box {
            width: 3000px; /*盒子的宽度*/
            height: 3000px;/*盒子的高度*/
            background:pink url(02.jpg) no-repeat 200px 500px/30%;/*background缩写：颜色 图片 是否重复 定位/尺寸大小*/
        }
    </style>
</head>
<body>
    <div class="box">
        
    </div>
</body>
</html>

七、：hover

当鼠标划过时所展现的状态！

color：transparent；让文字的颜色变为透明，进而消失！

transition：all 0.5s ease;

all：是让所有的动画；

0.5S ：过渡时间；

ease：规定过渡效果的时间曲线。默认是 "ease"。

七、border-radius：50%

在CSS3中是将4个角角度变成50%，正方形就会变成正园！