二、background 背景属性¶

TIP

background 背景属性（颜色、图片、重复、位置、复合属性）
CSS 精灵图，背景固定，背景尺寸
线性渐变，径向渐变，浏览器私有前缀等

1、background-color 背景颜色¶

TIP

background-color 表示背景颜色
背景颜色可以用十六进制、rgb()、rgba() 或英文单词表示
padding 区域是有背景颜色的

<style>
.box {
  width: 100px;
  height: 100px;
  padding: 20px;
  /* background-color: orange; */
  /* 背景颜色及透明度 0.5 */
  background-color: rgba(245, 100, 4, 0.5);
}
</style>
<body>
  <div class="box">1</div>
</body>

![[Pasted image 20260226152359.png]]

2、background-image 图片¶

TIP

background-image 属性用来设置背景图片
图片路径要写在 url() 圆括号中，可以是相对路径，也可以是绝对路径

特别注意：

地址相对路径是从 css 样式的位置出发

background-image: url(./images/bg.jpg);

案例

案例目录结构

demo
├── css
│   └── index.css  /* css文件 */
├── images
│   └── luobo.png  /* 图片 */
└── index.html

/* demo/css/index.css */
.box {
  width: 500px;
  height: 400px;
  border: 50px solid #000;
  padding: 50px 40px;
  background-color: yellow;
  /* 图片地址是从当前css样式文件位置出发，查找图片的。*/
  background-image: url(../images/luobo.png);
}

<!-- demo/index.html -->
<head>
  <link rel="stylesheet" href="css/index.css" />
</head>
<body>
  <div class="box">内容区内容区内容区内容区内容区</div>
</body>

3、background-repeat 重复¶

TIP

用来设置背景图片的重复模式，在默认情况下，背景是会在 x 和 y 轴方向进行平铺。

background-repeat 属性值

值	描述
repeat;	x, y 均平铺（默认）
repeat-x;	x 平铺
repeat-y;	y 平铺
no-repeat;	不平铺

<style>
  div {
    /* 宽度 */
    width: 200px;
    /* 高度 */
    height: 200px;
    /* 边框线 */
    border: 2px solid red;
    /* 背景图 */
    background-image: url(./images/bg48.png);
    /* 左外边距 */
    margin-left: 20px;
    /* 左浮动 */
    float: left;
  }
  .box1 {
    /* 不平铺 */
    background-repeat: no-repeat;
  }
  .box2 {
    /* y轴平铺 */
    background-repeat: repeat-y;
  }
  .box3 {
    /* x轴平铺 */
    background-repeat: repeat-x;
  }
  .box4 {
    /* x 和 y 轴平铺 */
    background-repeat: repeat;
  }
</style>
<body>
  <div class="box1"></div>
  <div class="box2"></div>
  <div class="box3"></div>
  <div class="box4"></div>
</body>

![[Pasted image 20260226152650.png]]

4、background-position 背景图片位置¶

TIP

用来控制背景图片在盒子中显示的开始位置
背景图片位置默认是从 padding 区开始计算

语法：

/* x与盒子左边距离  y与盒子上边距离 */
background-position: x y;

4.1、数值表达法¶

固定值写法

/* 背景图与盒子左边20px  上边30px距离 */
background-position: 20px 30px;

单个值写法

/* 表时背景图与盒子左边间距为宽的10px，垂方向居中显示 */
background-position: 10px;

背景图片位置（数值表达法），应用案例

<style type="text/css">
  div {
    width: 100px;
    height: 100px;
    border: 2px solid red;
    /* 背景图片 */
    background-image: url(./images/bg.png);
    /* 背景图不重复 */
    background-repeat: no-repeat;
    /* 背景尺寸大小 */
    background-size: 50px 50px;
    /* 左浮动 */
    float: left;
    /* 左外边距 */
    margin-right: 10px;
  }
  .box1 {
    /* 水平30px 上边 20px */
    background-position: 30px 20px;
  }
  .box2 {
    /* 水平10px  垂直居中显示 */
    background-position: 10px;
  }
</style>
<body>
  <div class="box1"></div>
  <div class="box2"></div>
</body>

![[Pasted image 20260226152838.png]]

4.2、百分比表达法¶

TIP

百分比写法 x% y%，则最后的偏移量是

左偏移量 = (容器 width + 左右 padding - 背景图 width) * 百分比
上偏移量 = (容器 height + 上下 padding - 背景图 height) * 百分比

语法：

background-position: x% y%;

/* 如果盒子宽为 100px 高为 200px ，内边距为 0 ，
背景图宽为 50px 高为 50px
则左边距离为 (100+0-50) * 10% = 5px;
则上边距离为 (200+0-50) * 20% = 30px
*/
background-position: 10% 20%;

元素未设置 padding 属性

<style>
  .box {
    width: 200px;
    height: 100px;
    border: 2px solid red;
    /* 背景图片 */
    background-image: url(flower.jpg);
    /* 背景图片大小 */
    background-size: 50px 50px;
    /* 背景图片重复度 */
    background-repeat: no-repeat;
  }
  .box1 {
    /* 
        左侧距离为 (容器宽200+0-背景图宽50) * 10 = 15px
        顶部距离为 (容器高100+0-50背景图高) * 20% = 10px 
        */
    background-position: 10% 20%;
  }
  .box2 {
    background-position: 15px 10px;
  }
</style>
<body>
  <div class="box box1"></div>
  <div class="box box2"></div>
</body>

![[Pasted image 20260226153009.png]]

元素设置 padding 属性值

<style>
    .box {
        padding: 50px;
        width: 200px;
        height: 100px;
        border: 2px solid red;
        background-image: url(./images/bg.png);
        background-size: 50px 50px;
        background-repeat: no-repeat;
        /*
            左偏移量=（容器width + 左右padding - 背景图width)*百分比
            左边距=((200+50*2)-50) *20%=50px
            上偏移量=（容器height +上下padding  -  背景图 height）*百分比
            上边距=((100+50*2)-50) *30%=45px
        */
        background-position: 20% 30%;
    }
    .box1 {
        background-position: 50px 45px;
    }
</style>
<body>
    <div class="box"></div>
    <div class="box box1"></div>
</body>

![[Pasted image 20260226153050.png]]

单个值写法语法

/* 
    如果容器宽为200px 高为100px ，padding为0 ，背景图片宽为50px 高为50px;
    则背景图片与容器左边（水平）距离为 (200-50)*10%=15px
    则背景图在垂直方向上居中显示
*/
background-position: 10%;

<style type="text/css">
    div {
        width: 200px;
        height: 100px;
        border: 2px solid red;
        /* 背景图片 */
        background-image: url(bg.png);
        /* 背景图不重复 */
        background-repeat: no-repeat;
        /* 背景尺寸大小 */
        background-size: 50px 50px;
        /* 左外边距 */
        margin-right: 10px;
    }
    .box1 {
        /*
            背景图与容器左边距离（水平）为 (200-50)*10=15px
            背景图与容器在垂直方向上居中显示
        */
        background-position: 10%;
    }
    .box2 {
        /* 水平15px  垂直居中显示 */
        background-position: 15px;
    }
</style>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>

![[Pasted image 20260226153153.png]]

负值情况

<style>
  div {
    width: 200px;
    height: 100px;
    border: 2px solid red;
    /* 背景图片 */
    background-image: url(bg.png);
    /* 背景图不重复 */
    background-size: 50px 50px;
    background-repeat: no-repeat;
    /* 左外边距 */
    margin-right: 10px;
  }
  .box1 {
    /* 水平-15px 上边 -30px */
    background-position: -15px -30px;
  }
  .box2 {
    /* 
        左边 (200-50) * (-10%) = -15px 
        上边 (100-50) * -60% = -30px
    */
    background-position: -10% -60%;
  }
</style>
<body>
  <div class="box1"></div>
  <div class="box2"></div>
</body>

![[Pasted image 20260226153232.png]]

4.3、关键词表达法¶

TIP

可以用 (top、bottom)、(center)、(left、right) 三组中的任意两个组中的一个值组合来确定位置
也可以用以上三组中的任意一个单词来确定位置

/* 左上角 */
background-position: top left;
/* 左边中间 */
background-position: left center;
/* 上中间 */
background-position: top;
....

单一关键字与对应组合关键字表示法

单一关键字	等价的组合关键字
center	center center
top	top center 或 center top
bottom	bottom center 或 center bottom
right	right center 或 center right
left	left center 或 center left

<style>
  div {
    width: 110px;
    height: 100px;
    /* 内边距 */
    padding: 10px;
    border: 2px solid red;
    /* 浮动 */
    float: left;
    /* 左外边距 */
    margin-right: 10px;
    /* 文本水平居中 */
    text-align: center;
    /* 文本垂直居中 */
    line-height: 100px;
    /* 文字颜色 */
    color: red;
    /* 背景图片 */
    background-image: url(images/bg.png);
    /* 背景不重复 */
    background-repeat: no-repeat;
  }
  /* 左上角 */
  .box1 {
    background-position: left top;
  }
  /* 左中间 */
  .box2 {
    background-position: left center;
    line-height: 20px;
  }
  /* 左下角 */
  .box3 {
    background-position: left bottom;
  }
  /* 右上角 */
  .box4 {
    background-position: right top;
  }
  /* 右中间 */
  .box5 {
    background-position: right center;
    line-height: 20px;
  }
  /* 左下角 */
  .box6 {
    background-position: right bottom;
  }
  /* 上中间 */
  .box7 {
    background-position: top center;
  }
  /* 水平垂居中 */
  .box8 {
    background-position: center center;
    line-height: 20px;
  }
  /* 水平垂居中 */
  .box9 {
    background-position: center;
    line-height: 20px;
  }
</style>
<body>
  <div class="box1">left top</div>
  <div class="box2">left center</div>
  <div class="box3">left bottom</div>
  <div class="box4">right top</div>
  <div class="box5">right center</div>
  <div class="box6">right bottom</div>
  <div class="box7">top center</div>
  <div class="box8">center center</div>
  <div class="box9">center</div>
</body>

![[Pasted image 20260226153403.png]]