html - CSS偏移但保持全宽

Question

我有一个填满屏幕的背景，当我达到 1234px 时，我想将背景图像定位得更靠左一点，再靠下一点，但是当我使用 background-position 来偏移时:-

background-position: right 20px bottom 40px;

我在将背景推开的地方得到了空白。有办法解决这个问题吗？这是我的 CSS 类:-

    .full-background{
    height:100vh;
    width:100%;
             background: no-repeat;
 background-position: bottom center;
 background-origin: content-box;
 background-size: cover;
 background-image: url('assets/img/background.png');
 min-width:100%;
 position:relative;
    }

Answer 1

你可以使用伪元素，像这样

.bkg {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
}
.bkg::after {
  content: '';
  position: absolute;
  left: -10%;
  top: -10%;
  width: 120%;
  height: 120%;
  background-image: url(http://lorempixel.com/500/400/nature/1);
  background-size: cover;
  background-position: center;
}
@media screen and (min-width: 900px) {  /* add your min-width here */
  .bkg::after {
    left: calc(-10% + 20px);
    top: calc(-10% + 40px);
  }  
}

<div class="bkg"></div>