css中怎样设置图片靠下

在CSS中，我们可以使用background-position属性来控制背景图片的位置。默认情况下，背景图片的位置是在元素的左上角。如果我们想将背景图片设置在元素的底部，可以将background-position设置为 center bottom，其中center表示水平方向居中，bottom表示垂直方向靠下。

.example {
  background-image: url('example.jpg');
  background-repeat: no-repeat;
  background-position: center bottom;
} 

上面的代码将example.jpg作为该元素的背景图片，并且不允许重复。同时，将背景图片的位置设置在元素的水平方向居中和垂直方向靠下。

如果我们想要调整背景图片与元素底部的间距，可以使用background-position的第二个参数来控制。如background-position: center 20px，则会在元素底部下方留出20像素的间距。

.example {
  background-image: url('example.jpg');
  background-repeat: no-repeat;
  background-position: center 20px;
} 

上面的代码将背景图片设置在元素的水平方向居中，垂直方向离底部20像素的位置。

需要注意的是，背景图片的位置是相对于元素的padding box而言。因此，如果元素存在padding或border，背景图片的位置可能会受到影响。

.example {
  background-image: url('example.jpg');
  background-repeat: no-repeat;
  background-position: center bottom;
  padding: 20px;
} 

上面的代码将元素的padding设置为20像素，此时背景图片的位置仍然是相对于padding box而言，而不是整个元素。

总之，使用background-position属性可以轻松地控制背景图片的位置，让你的页面在视觉上更加美观。