CSS3 Transform rotate 改变流程

Question

我需要创建一个带有白色背景颜色的背景图片的网站：

现在的问题是，CSS3 Transform 的旋转属性改变了 HTML 的流而不更新 HTML 的高度。

为了证明这一点，我添加了一些文本以创建滚动条：

如您所见，页面切断了背景图像，当我删除变换时，背景在它应该结束的地方结束：

生成旋转白色背景的元素是主内容内的绝对定位 div，顶部和底部 0px，左右 100vw，以确保当我旋转它时它不会显示任何角。实际的背景图片是一个绝对定位的 div，所有边都是 0px，但同样可以通过将其提供给 HTML 标签来实现。

我知道为什么它会创建一个额外的滚动条，因为 w3 的定义：

W3 info about adding a scrollbar

对于布局由 CSS 盒子模型控制的元素，transform 属性不会影响转换后元素周围内容的流动。但是，溢出区域的范围考虑了变换的元素。此行为类似于通过相对定位偏移元素时发生的情况。因此，如果overflow属性的值是scroll或auto，滚动条会根据需要出现，以查看在可见区域之外转换的内容。

现在我的问题是，为什么（绝对）元素的转换会创建一个额外的滚动条，但没有相应地更新 HTML 以显示正确的背景（例如）？我怎样才能正确解决这个问题？

Answer 1

也许使用background gradient 就可以了，它可以放在背景图像的顶部或页眉和页脚内（图像也可以分成这两个），其中内容只保留一个背景颜色。

section {
  background: linear-gradient(-189deg, transparent 10em, white 10.2em, white 50%, transparent 55%), linear-gradient(351deg, transparent 10em, white 10.2em, white 50%, transparent 55%), url(https://static.pexels.com/photos/105294/pexels-photo-105294-medium.jpeg);
  background-size: cover;
  width: 1020px;
  margin: auto;
  border:solid;
}

nav {
  padding: 4em 1em;
}

footer {
  font-size: 2em;
  padding: 3em 2em 1em ;
  text-align: right
}

aside {
  float: left;
  width: 25%;
  margin: 3%;
  padding: 1em;
  background: white;
  box-shadow: 5px 5px 5px 5px;
}

aside img {
  max-width: 100%;
}

article {
  padding: 1em 3%;
  overflow: hidden;
  /* extra demo purpose to resize content */
  transition:0.5s;
}
article:hover {font-size:0.5em;}

<section>
  <nav><a href="#">link</a>  <a href="#">link</a>  <a href="#">link</a>  <a href="#">link</a>  <a href="#">link</a>  <a href="#">link</a>  <a href="#">link</a> 
  </nav>
  <div>
    <aside>
      <img src="https://static.pexels.com/photos/139229/pexels-photo-139229-medium.jpeg" />
    </aside>
    <article>
      <h1>HTML Ipsum Presents</h1>

      <p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris
        placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis
        tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>

      <h2>Header Level 2</h2>

      <ol>
        <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
        <li>Aliquam tincidunt mauris eu risus.</li>
      </ol>

      <blockquote>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus
          turpis elit sit amet quam. Vivamus pretium ornare est.</p>
      </blockquote>
    </article>
    <footer>
      footer standing at bottom</footer>
  </div>
</section>

Answer 2

但是，溢出区域的范围考虑了转换后的元素。

按照此定义，您的转换 div 扩展高度是正确的。如果不想扩大高度，可以在父元素上使用overflow:hidden。

另外，你想要背景全屏，对吧？然后使用position:fixed 而不是position:absolute 作为背景div。