CSS属性-背景属性

浅笑心柔142

已于 2024-08-24 17:17:52 修改

阅读量1.7k

点赞数 19

文章标签： css 前端

于 2024-08-22 16:10:15 首次发布

本文链接：https://blog.csdn.net/qq_72013756/article/details/141424009

版权

一、background-color属性（背景颜色）

background-color属性用于指定元素的背景颜色。

background-color属性为元素设置一种纯色背景。这种颜色会填充元素的内容、内边距和边框区域，扩展到元素边框的外边界（但不包括外边距）。如果边框有透明部分（如虚线边框），会透过这些透明部分显示出背景色。

提示：使用背景色和文本颜色，使文本易于阅读。

HTML代码：

<p>此页面的背景色设置为LightSkyBlue。</p>

CSS代码：

body {
    background-color: #87CEFA;
}

执行结果：

1、background-color的属性值

background-color可以使用三种不同的格式的参数来定义：

颜色名称关键词：red、blue等；
十六进制值：#fff、#000、#6e6e6e等；
RGB：rgb(255,255,255)、rgba(0,0,0,0.5)等（使用rgba可以实现透明背景色）；

在下面的例子中，body，h1和p元素被分配了不同的背景颜色：

HTML代码：

<h1>我会暴富</h1>
<p>我会暴富</p>

CSS代码：

body {
   background-color: #C0C0C0;
}
h1 {
   background-color: rgb(135,206,235);
}
p {
   background-color: LightGreen;
}

执行结果：

二、background-image属性（背景图像）

background-image属性在元素中设置一个或多个背景图像。

语法：background-image : url(图片路径)

提示：请设置一种可用的背景颜色，这样的话，假如背景图像不可用，可以使用背景色代替。

我们来为body元素设置一个背景图片。

CSS代码：

body {
   background-image: url("./猫咪.png");
   background-color: #e9e9e9;
}

该url指定图像文件的路径。支持相对路径和绝对路径。

执行结果：

默认情况下，背景图像放置在元素的左上角，并且垂直和水平重复以覆盖整个元素。

1、background-image属性

background-image不仅可以设置整个页面，而且可以设置个别元素。

下面我们为<p>元素设置一个背景图片。

HTML代码：

<p>我会暴富</p>

CSS代码：

p {
   padding: 30px;
   background-image: url("猫咪.png");
   color: black;   
}

执行结果：

三、background-repeat属性（重复背景）

background-repeat属性指定如何重复背景图像。背景图像可以沿水平轴，垂直轴，两个轴重复，或者根本不重复。

background-repeat属性设置或检索对象的背景图像如何铺排填充。必须先指定background-image属性。

允许提供2个参数，如果提供全部2个参数，第1个用于横向，第二个用于纵向。

如果只提供1个参数，则用于横向和纵向。特殊值repeat-x和repeat-y除外，因为repeat-x相当于repeat no-repeat，repeat-y相当于no-repeat repeat，即其实repeat-x和repeat-y等价于提供了2个参数值。

repeat的取值如下:

repeat：背景图像在横向和纵向平铺，默认值。
repeat-x：背景图像在横向上平铺。
repeat-y：背景图像在纵向上平铺。
no-repeat：背景图像不平铺。
round：背景图像自动缩放直到适应且填充满整个容器。（CSS3）
space：背景图像以相同的间距平铺且填充满整个容器或某个方向。（CSS3）

如下，repeat-x，只会水平重复背景颜色。

CSS代码：

body {
   background-image: url("猫咪.png");
   background-repeat: repeat-x;  
}

执行结果：

如下，repeat-y，只会垂直重复背景图像。

CSS代码：

body {
   background-image: url("猫咪.png");
   background-repeat: repeat-y;
}

执行结果：

1、设置继承值

当您将background-repeat属性设置为inherit时，它将采用与元素父级的属性相同的指定值。

例如，我们只在body上设置background-repeat:repeat-x;。如果我们设置了一些段落的background-repeat为inherit，它们将采用与body元素相同的属性值。

CSS代码：

body {
   background-image: url("猫咪.png");
   background-repeat: repeat-x;
}
p {
   background-image: url("猫咪.png");
   background-repeat: inherit;
   margin-top: 100px;
   padding: 40px;
}

执行结果：

四、background-attachment属性（背景固定滚动）

background-attachment属性设置背景图像是固定的还是与页面的其余部分一起滚动。

background-attachment属性的参数：

scroll：默认值。背景图像会随着页面其余部分的滚动而移动。
fixed：当页面的其余部分滚动时，背景图像不会移动。
inherit：规定应该从父元素继承 background-attachment 属性的设置。

设置了fixed属性后，即使元素具有滚动机制，背景图像会固定在某个位置不会跟随页面元素滚动。

CSS代码：

body {
   background-image: url("老虎.png");
   background-repeat: no-repeat;
   background-attachment: fixed;
}

执行结果：

1、background-attachment属性

background-attachment可以设置为inherit或scroll。

当您将background-attachment设置为inherit时，它将继承其父元素的值。

当您将背景附件设置为scroll时，背景图片将与其余内容一起滚动。

CSS代码：

body {
   background-image: url("老虎.png");
   background-repeat: no-repeat;
   background-attachment: scroll;
}

执行结果：

五、background-size属性（背景大小）

该属性设置背景图像的大小

值	说明
length	设置背景图片的宽度和高度，第一个值宽度，第二个值高度，如果只是设置一个，第二个值auto
percentage	计算相对位置区域的百分比，第一个值宽度，第二个值高度，如果只是设置一个，第二个值auto
cover	保持图片纵横比并将图片缩放成完全覆盖背景区域的最小大小
contain	保持图片纵横比并将图片缩放成适合背景定位区域的最大大小

把图片缩放至完全覆盖背景区域的实例：

body {
    background-image: url("老虎.png");
    background-repeat: no-repeat;
    background-size: cover;
 }

执行结果：

六、background-position属性（背景起始位置）

该属性设置背景图像的起始位置，其默认值是：0% 0%

值	说明
left top	左上角
left center	左中
left bottom	左下
right top	右上角
right center	右中
right bottom	右下
center top	中上
center center	中中
center bottom	中下
x% y%	第一个值是水平位置，第二个值是垂直位置，左上角是0% 0%,右下角是100% 100%。如果只指定了一个值，其他默认是50%。默认是0% 0%
xpos ypos	单位是像素

背景起始位置为中间的实例：

div{
    width:400px;
    height:400px;
    background-image: url("老虎.png");
    background-repeat: no-repeat;
   background-position: center center;
 }

执行结果：