阻止调整图像大小

Question

我不明白为什么，但是背景图像调整大小被某些东西阻止了。

我有以下代码可以将图像添加到 div 的背景中，我愿意显示整个图像，而不仅仅是它的中心。一些图像是如何放大的，我想将其更改为完整图像视图。

#section1{
  background-image: url(http://freevectorsite.com/wp-content/uploads/2013/09/Abstract-Hi-Tech-Background.jpg);
  background-size:     cover;
  background-repeat:   no-repeat;
  background-size: 100% 1000px;
  transform: translateZ(-1px) scale(2);
  z-index:-1;
}

HTML:

<div id="section1" class="section">
      <div class="text">
        <p>My Work</p>
      </div>
    </div>

CodePen

如何使用 background-size 查看整个图像而不是其中的一部分？

Answer 1

根据您提供的代码，div 的高度不是手动设置的，因此它的高度是自动的，等于其内容的大小（高度）。 div 仅包含子项 div 和段落，因此它的大小很小。

所以你可以试试这个：

<div id="section1" class="section">
    <div class="text">
       <p>My Work</p>
    </div>
</div>

#section1{
  background-image: url(http://freevectorsite.com/wp-content/uploads/2013/09/Abstract-Hi-Tech-Background.jpg);
  background-size:     cover;
  background-repeat:   no-repeat;
  transform: translateZ(-1px) scale(2);
  height: 100vh; /*This equals to whole viewport height, but you can try any size you want*/
  z-index:-1;
}

Answer 2

试试这个

#section1{
  background-image: url(http://freevectorsite.com/wp-content/uploads/2013/09/Abstract-Hi-Tech-Background.jpg);
  background-size:     cover;
  background-repeat:   no-repeat;
  background-size: 100%;
  transform: translateZ(-1px) scale(1);
  z-index:-1;
}
#section1 .text{
  transform: translateZ(-1px) scale(1.5);
}

阻止调整图像大小

Resizing image prevented

html

css

css-transforms