CSS移动图像URL向上移动

Question

我在CSS中使用URL设置了一个图像，如下所示：

.main-header {
background-color: rgba(0,0,0,.6);
background-image: url("images/store/concert.jpg");
background-blend-mode: multiply;
background-size: cover;
padding-bottom: 30px;
}

我试图将图像向上移动(图像的顶部正在显示，我希望中间部分显示)。这是如何做到的呢？

Answer 1

background-position:center是您要寻找的内容：

​

.main-header {
  background-color: rgba(0, 0, 0, .6);
  background-image: url("https://res.cloudinary.com/fleurop/cmsimages2/content/newsletter/alles-ueber-blumen/valentinstag-rosenblaetter-header.jpg");
  background-blend-mode: multiply;
  background-size: cover;
  padding-bottom: 30px;
  background-position: center;
}

<div class="main-header">
  <div>

​

Answer 2

尝尝这个

.main-header {
background-color: rgba(0,0,0,.6);
background-image: url("images/store/concert.jpg");
background-blend-mode: multiply;
background-size: cover;
padding-bottom: 30px;
background-repeat: no-repeat;
background-position: center;
}