[分享]css中 元素背景图片添加

CSS中添加元素背景图片非常常见，可以为页面增添丰富的视觉效果，下面就让我们来看看如何在CSS中添加元素背景图片吧。/ 在CSS样式中添加背景图片 / .element { backgroundima...

CSS中添加元素背景图片非常常见，可以为页面增添丰富的视觉效果，下面就让我们来看看如何在CSS中添加元素背景图片吧。

/* 在CSS样式中添加背景图片 */
.element {
  background-image: url("bg.jpg"); /* 添加背景图片 */
  background-size: cover; /* 调整背景图片尺寸 */
  background-position: center; /* 背景图片居中 */
  background-repeat: no-repeat; /* 禁止背景图片重复出现 */
} 

以上CSS代码中，我们通过background-image属性来添加背景图片，可以把图片路径放在url()函数内，同时可以使用相对路径和绝对路径等方式加载图片。

background-size属性可以调整背景图片的尺寸，有cover、contain等取值，cover表示图片尽可能的填满元素，但是可能会有部分内容不被显示，而contain表示图片会完整展示在元素内，但是可能会有空白区域。

background-position属性可以设置背景图片的位置，有left、right、center、top、bottom等取值，并且可以组合使用，例如：background-position: center top;表示图片在元素居中顶部位置显示。

background-repeat属性可以控制背景图片是否重复出现，有repeat、repeat-x、repeat-y、no-repeat等取值，其中no-repeat可以禁止图片重复展示。

除此之外，在实际项目开发中，我们也可以通过伪类来实现背景图片的添加，如下所示：

/* 通过伪类添加背景图片 */
.element:before {
  content: '; /* 必须有内容 */
  position: absolute; /* 脱离文档流 */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("bg.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: -1; /* 放在元素下方 */
} 

以上代码中，我们通过:before伪类来添加背景图片，同时需要设置伪类的position为absolute，这样可以让伪类脱离文档流，不会影响原有元素的布局。

通过以上两种方式，可以在CSS中轻松添加元素背景图片，让页面更加美观。