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變換旋轉改變流動

回答

相關問題