如何设置CSS背景图片

一、背景图片的基本概念

CSS背景图片是指在设置元素的背景时，使用图片来填充背景，可以是单张图片，也可以是一组图片的组合，用于美化元素展示效果

在CSS中，设置背景以background为属性，其中background-image表示设置背景图片

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

二、背景图片的选取和预处理

选择合适的背景图片是关键，需要考虑图片的色彩和构图对于元素的衬托作用，同时也要尽可能保证图片的大小是合理的，以减少页面加载时间

对于背景图片的预处理可以使用一些工具，如Photoshop中的减小图片大小，压缩图片质量等，以达到更好的优化效果

三、背景图片的属性和取值

background-image属性中，除了url()以外，还有其他一些取值可以使用，包括：

• linear-gradient
• radial-gradient
• repeating-linear-gradient
• repeating-radial-gradient

这些值的使用可以实现更为复杂的背景效果，例如线性渐变、径向渐变等，具体的使用可以参考以下代码：

.selector {
  /*使用单张图片*/
  background-image: url("example.jpg");
  
  /*使用线性渐变*/
  background-image: linear-gradient(to right, red , yellow);
  
  /*使用径向渐变*/
  background-image: radial-gradient(ellipse at center, #ffefba 0%, #ffffff 100%);
  
  /*使用重复渐变*/
  background-image: repeating-linear-gradient( to bottom right, red, yellow 10%);
}

四、背景图片的尺寸和位置

在CSS中，可以使用background-size和background-position属性来控制背景图片的大小和位置

其中，background-size有多种取值，包括：

• auto
• contain
• cover
• 长度值

而background-position用于设定背景图片在元素中的位置，可以使用具体的像素值，也可以使用相对值，如center、left top等

.selector {
  /*背景大小原始比例*/
  background-size: auto;
  
  /*背景图片完整显示*/
  background-size: cover;
  
  /*背景图片全部显示*/
  background-size: contain;
  
  /*背景图片大小为100px*50px*/
  background-size: 100px 50px;
  
  /*背景图片居中*/
  background-position: center center;
  
  /*背景图片靠左上*/
  background-position: left top;
}

五、背景图片的重复性

背景图片在设置时，也要考虑到图片的重复性，即需要重复来填充元素背景的图片，可以使用background-repeat属性

其中，background-repeat有以下取值：

• repeat
• repeat-x
• repeat-y
• no-repeat

分别表示在水平方向、垂直方向或者两者方向都重复，或者不重复使用

.selector {
  /*背景重复*/
  background-repeat: repeat;
  
  /*只在水平方向重复*/
  background-repeat: repeat-x;
  
  /*只在垂直方向重复*/
  background-repeat: repeat-y;
  
  /*不重复*/
  background-repeat: no-repeat;
}

六、实例代码

下面是一个实例代码，展示了如何设置背景图片，并使用其他属性来控制图片展示效果

.background-example {
  background-image: url("example.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}