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

您可以使用伪元素，例如

＆＃13;

.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);
  }  
}

＆＃13;

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

＆＃13;

CSS偏移但保持全宽

1 个答案: