CSS图片背景属性

1. background-color

用于设置元素的背景颜色。支持颜色关键字、RGB/RGBA值、十六进制值。

.box { 
  background-color: #ffffff; /* 白色背景 */
  background-color: rgba(255, 0, 0, 0.5); /* 半透明红色 */
}

2. background-image

用于设置背景图片，通过url()指定图片路径（本地或网络）。图片小于容器时会自动平铺填充。

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

注意点: 1.图⽚的地址必须放在url()中, 图⽚的地址可以是本地的地址, 也可以是⽹络的地址 2.如果图⽚的⼤⼩没有标签的⼤⼩⼤, 那么会⾃动在⽔平和垂直⽅向平铺来填充 3.如果⽹⻚上出现了图⽚, 那么浏览器会再次发送请求获取图⽚

3. background-repeat

控制背景图片的平铺方式：

• repeat：默认，水平和垂直平铺
• no-repeat：不平铺
• repeat-x：仅水平平铺
• repeat-y：仅垂直平铺

.box { 
  background-repeat: no-repeat; 
}

4. background-position

控制背景图片的位置，支持方位名词（如left top）或具体像素值（可负值）。

.box {
  background-position: center bottom; /* 水平居中，垂直底部 */
  background-position: -50px 100px; /* 负偏移 */
}

5. 背景属性缩写

通过background简写属性合并设置，顺序为：颜色、图片、重复、定位、关联方式。可省略部分属性。

.box {
  background: #fff url("image.jpg") no-repeat fixed center; 
}

6.背景关联方式

通过background-attachment控制背景是否随滚动条滚动：

• scroll：默认，背景随滚动条滚动
• fixed：背景固定

.box {
  background-attachment: fixed; 
}

背景图与插入图区别

背景图：

• 通过CSS设置（background-image）
• 不占用布局空间，仅装饰
• 支持定位控制（background-position）

插入图：

• 使用HTML <img>标签
• 占用布局空间，影响其他元素排列
• 语义更强，利于SEO

<!-- 插入图示例 -->
<img src="image.jpg" alt="描述文本">

实用建议

• 需要动态内容或SEO优化时使用<img>标签。
• 纯装饰性图片用CSS背景图，减少HTML复杂度。
• 背景图定位灵活，适合需要精确控制的场景。