Question

我有几个div个（部分），我希望他们在整个部分都有background点差。我有这张图片1920x1080 px，我正在使用这些属性来显示它：

#first{
    background-image: url(images/officialWallpaper.jpg);
    background-size:     cover;                      
    background-repeat:   no-repeat;
    background-position: center center;
}

我想知道是否有像cover那样显示图像的方式，但是从图像的顶部开始，以便它不会被裁剪。< / p>

离开你的website，这样当你说图像的顶部被裁剪时你就可以明白我的意思了！（第一部分有cover，第二部分contain，所以你可以看到差异）

Answer 1

使用background-position: top center将背景与视口顶部对齐。

#first{
    background-image: url(images/officialWallpaper.jpg);
    background-size:     cover;                      
    background-repeat:   no-repeat;
    background-position: top center;
}

Answer 2

将background-position设为top left，即background-position: center center;

Answer 3

这是你要改变的位置......

#first {
  background: url("images/officialWallpaper.jpg") top left no-repeat;
  background-size: cover;
}

Answer 4

是的，第一张图片中有一些裁剪，所以要解决这个问题，使用背景位置作为顶部或顶部中心和背景大小到封面。它涵盖了整个视口的高度和宽度。

#first{
background-image: url(images/officialWallpaper.jpg);
background-size:     cover;                      
background-repeat:   no-repeat;
background-position: top;
}

Answer 5

选项1：如果您只想显示图片的顶部而不关心底部，只需删除background-position:center center。

＆＃13;

#first {
  background-image: url(http://clashnow.maxfet.net:9010/images/officialWallpaper.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  /* background-position: center center; */
}

＆＃13;

<div class="section fp-section fp-table active fp-completely" id="first" style="height: 459px;background-color: rgb(204, 204, 204);">
  <div class="fp-tableCell" style="height: 459px;"></div>
</div>

＆＃13;

选项2：您可以使用包含并获得显示整个图像的结果，只需稍微小一些。

＆＃13;

#first {
  background-image: url(http://clashnow.maxfet.net:9010/images/officialWallpaper.jpg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center; 
}

＆＃13;

<div class="section fp-section fp-table active fp-completely" id="first" style="height: 459px;background-color: rgb(204, 204, 204);">
  <div class="fp-tableCell" style="height: 459px;"></div>
</div>

＆＃13;

选项3：使用固定，

＆＃13;

#first {
  background: url(http://clashnow.maxfet.net:9010/images/officialWallpaper.jpg) no-repeat top center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

＆＃13;

<div class="section fp-section fp-table active fp-completely" id="first" style="height: 459px;background-color: rgb(204, 204, 204);">
  <div class="fp-tableCell" style="height: 459px;"></div>
</div>

＆＃13;

如何正确使用覆盖background.image属性

5 个答案: