Question

我需要创建一个背景图片覆盖白色背景图片的网站：

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

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

正如您所看到的，页面会切断背景图像，当我删除转换后，背景将在它应该结束的位置结束：

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

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

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

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

Answer 1

也许可以使用background gradient，它可以放在背景图像之上，也可以放在页眉和页脚（图像也可以分成两个）中，内容只包含背景颜色。

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

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

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

另外，你想要背景全屏，对吗？然后使用position:fixed代替position:absolute作为背景div。

CSS3 Transform旋转改变流程

2 个答案: