CSS3变换旋转改变流动

我需要创建与上覆盖在白色背景彩色背景图像的网站：CSS3变换旋转改变流动

现在的问题是，在CSS3变换旋转属性将改变HTML流而不更新所述HTML的高度。

为了证明这一点，我将文本追加一点创建一个滚动条：

正如你可以看到，页面切断的背景图片，当我删除变换背景的地方它结束应该结束：

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

我不知道为什么会产生，因为W3规定的定义的附加滚动条：

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

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

来源

2016-11-09 Thomas van den Bulk

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

遵循此定义，正确地表示您的变换div扩展高度。如果您不希望展开高度，则可以在父元素上使用overflow:hidden。

此外，你想要背景全屏的所有时间，对吧？然后使用position:fixed而不是position:absolute作为背景div。

来源

2016-11-09 10:39:57

我不能用溢出：隐藏，因为它会删除滚动条，我希望有一个滚动条，如果页面的内容太长。将背景设置为固定也不是我的问题的有效解决方案，因为我希望背景图片能够与页面一起展开，我只需要标题包含大海，其余部分则是沙子。 –

@ThomasvandenBulk所以你想垂直重复背景，但只能用沙子？ –

嗯，这确实带来了只给HTML背景的想法 - 只用沙子重复。 –

也许使用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>

来源

2016-11-09 11:32:17

这将是一个了不起的解决方案，因为它不给滚动条！只有几个问题。如果页面不长，白色背景只能封装文本，而不能继续到底部。另一个问题是，这个解决方案并没有将菜单等进行简化。如果您查看第一张图片，则会看到它通过顶部导航和右侧导航的中间。 –

CSS3变换旋转改变流动

回答

相关问题