CSS 常用样式background背景属性

一、背景颜色 background-color

CSS中的background-color是用来设置HTML元素的背景颜色的一个属性。它可以接受各种颜色值，包括具有名称的颜色和十六进制颜色值。

以下是一些示例代码：

设置元素的背景颜色为红色：

background-color: red;

设置元素的背景颜色为十六进制颜色值：

background-color: #00ff00; /* 绿色 */

设置元素的背景颜色为rgba颜色值：

background-color: rgba(255, 0, 0, 0.5); /* 半透明红色 */

在上面的代码中，background-color属性的值是用来定义HTML元素的背景颜色的。在第一个例子中，背景颜色被设置为红色。在第二个例子中，背景颜色被设置为十六进制颜色值。在第三个例子中，背景颜色被设置为一个RGBA颜色值，其中红色的值为255，绿色和蓝色的值都为0，透明度为0.5（半透明）。

二、背景图片 background-image

CSS的"background-image"属性可以用于为元素设置背景图片。可以将图片文件的路径作为"background-image"属性的值，或者使用URL()函数指定图片文件的路径。

例如，下面的代码将一个名为"bg.jpg"的图片作为元素的背景图片：

div {
  background-image: url("bg.jpg");
}

多个背景图片可以用逗号分隔：

div {
  background-image: url("bg1.jpg"), url("bg2.jpg");
}

也可以将图片的URL指定为变量。例如：

:root {
  --bg-url: url("bg.jpg");
}
 
div {
  background-image: var(--bg-url);
}

三、背景重复 background-repeat

background-repeat属性定义了背景图像是否重复，如果图像重复，如何重复。

该属性可以接受以下值：

• repeat：默认值，背景图像在水平和垂直方向上重复。
• repeat-x：背景图像在水平方向上重复。
• repeat-y：背景图像在垂直方向上重复。
• no-repeat：背景图像不重复，只显示一次。

例如，可以使用以下CSS规则将背景图像设置为在水平和垂直方向上重复：

body {
  background-image: url("example.jpg");
  background-repeat: repeat;
}

四、背景定位 background-position

CSS的 background-position 属性用于定义背景图片的起始位置。它接受两个值，分别表示水平和垂直方向上的位置。默认值是 0% 0% ，即表示背景图片的左上角与容器的左上角对齐。

语法如下：

background-position: 水平位置 垂直位置;

其中，水平位置可以使用关键字或者百分数表示，也可以使用像素或其他长度单位表示。 垂直位置同理。

使用示例：

/* 将背景图片的左上角与容器的右上角对齐 */
background-position: right top;
 
/* 将背景图片的中心与容器的中心对齐 */
background-position: center center;
 
/* 将背景图片的右下角与容器的右下角对齐 */
background-position: 100% 100%;

可以通过组合不同的值来调整背景图片的位置。如果只指定一个值，则另一个值默认为50%，表示居中对齐。

五、背景附着 background-attachment

CSS属性background-attachment用于设置背景图像是否固定或随着页面滚动而滚动。该属性可取以下值：

• scroll: 默认值，背景图像随着页面滚动而滚动。
• fixed: 背景图像固定，不随页面滚动而滚动。
• local: 背景图像相对于元素滚动，而不是页面滚动。当元素本身可以滚动时，这个属性很有用。
• initial: 将该属性重置为其默认值.
• inherit: 从父元素继承该属性的值。

例如，以下代码将设置一个固定的背景图像：

body {
  background-image: url(background.jpg);
  background-attachment: fixed;
}

六、综合写法

CSS的background属性是一种综合属性，可以通过一条语句声明多个背景属性。以下是一些常见的使用方式：

基本语法

background: [background-color] [background-image] [background-repeat] [background-attachment] [background-position];

属性说明

• background-color：设置背景颜色。可以使用颜色值、rgb值、十六进制值等。
• background-image：设置背景图片。可以使用图片的url。
• background-repeat：设置背景图片是否重复。可以设置为repeat、repeat-x、repeat-y、no-repeat等。
• background-attachment：设置背景图片是否固定或随着页面滚动。可以设置为scroll、fixed等。
• background-position：设置背景图片的位置。可以设置为left top、center center、right bottom等。

代码实例

/* 设置背景颜色 */
background: #f7f7f7;
 
/* 使用图片作为背景 */
background: url("bg.png");
 
/* 设置背景图片不重复 */
background: no-repeat url("bg.png");
 
/* 将背景图片固定在页面 */
background: fixed url("bg.png");
 
/* 设置背景图片居中 */
background: center center url("bg.png");

背景图像将被放置在内容框之前，如果指定了边框，那么会覆盖部分边框。

七、背景应用

CSS背景属性可以用来设置元素的背景颜色、背景图像、背景重复方式等。以下是几个常用的背景属性及其应用：

1. background-color：设置元素的背景颜色。 例如： background-color: #f5f5f5;

2. background-image：设置元素的背景图像。 例如： background-image: url("img/bg.jpg");

3. background-repeat：设置背景图像的重复方式。 例如： background-repeat: repeat-x;

4. background-position：设置背景图像的位置。 例如： background-position: center;

5. background-size：设置背景图像的大小。 例如： background-size: cover;

6. background-attachment：设置背景图像的滚动方式。 例如： background-attachment: fixed;

综上所述，通过使用CSS背景属性，可以让网页更加美观、生动。

八、CSS3 新增背景属性

CSS3 新增的背景属性有以下几个：

1. background-clip：定义背景的裁剪区域；
2. background-origin：定义背景图片的位置区域；
3. background-size：设置背景图片的尺寸；
4. background-image：设置背景图片；
5. background-repeat：设置背景图片的平铺方式；
6. background-position：设置背景图片的位置；
7. background-color：设置背景颜色。

以下是详细解析和代码实例：

1. background-clip

定义背景的裁剪区域，可以将背景图片裁剪到指定的区域内。

属性值：

• border-box：裁剪到边框区域内；
• padding-box：裁剪到 padding 区域内；
• content-box：裁剪到内容区域内；
• inherit：继承父元素的属性值。

代码实例：

<style>
    div {
        width: 200px;
        height: 200px;
        border: 10px solid #000;
        padding: 20px;
        background-image: url('bg.jpg');
        background-clip: padding-box;
    }
style>
<div>div>

1. background-origin

定义背景图片的位置区域，可以设置背景图片从哪个位置开始显示。

属性值：

• border-box：图片从边框区域开始显示；
• padding-box：图片从 padding 区域开始显示；
• content-box：图片从内容区域开始显示；
• inherit：继承父元素的属性值。

代码实例：

<style>
    div {
        width: 200px;
        height: 200px;
        border: 10px solid #000;
        padding: 20px;
        background-image: url('bg.jpg');
        background-origin: content-box;
    }
style>
<div>div>

1. background-size

设置背景图片的尺寸，可以按照指定的比例缩放图片。

属性值：

• auto：自动适应尺寸；
• contain：缩放图片以适应容器；
• cover：缩放图片以填满容器；
• length：指定长度值；
• percentage：指定百分比；
• inherit：继承父元素的属性值。

代码实例：

<style>
    div {
        width: 200px;
        height: 200px;
        border: 10px solid #000;
        background-image: url('bg.jpg');
        background-size: cover;
    }
style>
<div>div>

1. background-image

设置背景图片。

属性值：

• url：指定图片路径；
• none：不设置背景图片。

代码实例：

<style>
    div {
        width: 200px;
        height: 200px;
        background-image: url('bg.jpg');
    }
style>
<div>div>

1. background-repeat

设置背景图片的平铺方式。

属性值：

• repeat：平铺；
• repeat-x：水平平铺；
• repeat-y：垂直平铺；
• no-repeat：不平铺；
• space：填充并平均分布；
• round：缩放并平均分布；
• inherit：继承父元素的属性值。

代码实例：

<style>
    div {
        width: 300px;
        height: 200px;
        background-image: url('bg.jpg');
        background-repeat: repeat-x;
    }
style>
<div>div>

1. background-position

设置背景图片的位置。

属性值：

• length：指定位置距离；
• percentage：指定百分比；
• left/top/right/bottom/center：指定位置；
• inherit：继承父元素的属性值。

代码实例：

<style>
    div {
        width: 300px;
        height: 200px;
        background-image: url('bg.jpg');
        background-position: center;
    }
style>
<div>div>

1. background-color

设置背景颜色。

属性值：

• 颜色名、十六进制、RGB、RGBA。

代码实例：

<style>
    div {
        width: 300px;
        height: 200px;
        background-color: #f00;
    }
style>
<div>div>