css 背景样式_css 背景 url-CSDN博客

本文链接：https://blog.csdn.net/qq_44713454/article/details/111462764

该博客主要介绍了CSS背景样式，包含背景颜色、背景图像、背景图像重复、背景定位等多个属性。还提及背景定位可使用关键字组合，也能用坐标定位，同时给出了各属性的参考链接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

css 背景样式

文章目录

css 背景样式

参考链接：css 背景

样式属性：

样式名	描述
background-color	设置背景颜色
background-image	设置背景图片
background-repeat	设置背景图片重复
background-position	设置背景图像定位
background-attachment	设置背景图像滚动
background-size	css3，设置背景图像大小
background-origin	css3，规定背景图片的定位区域。
background-clip	css3，规定背景的绘制区域。

背景颜色 background-color

参考链接：background-color

.box {
  /* 十六进制 */
  background-color: #3d3d3d;
  /* 颜色名称 */
  background-color: red;
  /* RGB */
  background-color: rgb(61, 61, 61);
  /* RGB +  alpha 透明：alpha 取值为 0 ~ 1，设置透明程度*/
  background-color: rgba(0, 0, 0, 0.6);
}

背景图像 background-image

参考链接：background-image

.box {
  background-image: url(./img/bk.jpg);
}

背景图像重复 background-repeat

参考链接：background-repeat

.box {
  /* 不重复 */
  background-repeat: no-repeat;
  /* 仅在水平方向重复 */
  background-repeat: repeat-x;
  /* 仅在垂直方向重复 */
  background-repeat: repeat-y;
}

背景定位 background-position

参考链接：background-position

.box {
  /* 上 左 ==> top left 等价于 left top*/
  background-position: top left;
  /* 上 中  */
  background-position: top center;
  /* 上 右 */
  background-position: top right;
}

供选择的关键字有：top、bottom; left、right; center;如果仅规定了一个关键字，第二个值默认为 center;

一共可以组合 9 个位置：

图片

除了关键字以外，还可以使用 x% y% 或 xpx ypx 来定位，x 代表水平位置，y 代表垂直位置。

.box {
  background-position: 50% 20%;
  background-position: 200px 100px;
}

背景图片随页面滚动 background-attachment

参考链接：background-attachment

.box {
  height: 960px;
  background-image: url(./img/bk.jpg);
  /* 默认值：随页面一起滚动 */
  background-attachment: scroll;
  /* 固定背景，不随页面滚动 */
  background-attachment: fixed;
}

规定背景图像大小 background-size

参考链接：background-size

.box {
  height: 100%;
  width: 100%;
  background-image: url(./img/bk.jpg);
  /* 用像素指定图像大小，第一个值设置宽度，第二个值为高度，如果只设置第一个值，第二个值为 auto */
  background-size: 700px 600px;
  /* 用百分比指定图像大小，第一个值设置宽度，第二个值为高度，如果只设置第一个值，第二个值为 auto */
  background-size: 100% 100%;
  /* 设置为 cover 值，会保持图像的纵横比来覆盖定位区域 */
  background-size: cover;
  /* 设置为 contain 值，会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。 */
  background-size: contain;
}

规定背景图像定位区域 background-origin

参考链接：background-origin

.box {
  height: 300px;
  width: 300px;

  margin: 20px;
  padding: 20px;
  border: 10px solid black;

  background-image: url(./img/vue.png);
  background-repeat: no-repeat;

  /* 根据 border 定位 */
  background-origin: border-box;
  /* 根据 padding 定位 */
  background-origin: padding-box;
  /* 根据 content 定位 */
  background-origin: content-box;
}

规定背景绘图区域 background-clip

参考链接：background-clip

.box {
height: 300px;
width: 300px;

margin: 20px;
padding: 20px;
border: 10px solid black;

background-color: brown;
background-repeat: no-repeat;
/* border 以内 */
background-clip:border-box;
/* padding 以内，border 与 padding 效果不明显 */
background-clip:padding-box;
/* content 以内 */
background-clip:content-box;
}