CSS图片背景属性

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

css 复制代码

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

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

css 复制代码

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

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

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

css 复制代码

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

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

css 复制代码

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

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

css 复制代码

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

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

css 复制代码

.box {
  background-attachment: fixed; 
}

背景图：

插入图：

html 复制代码

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