斜DIV沒有顯示

嗨，大家好我試圖recrate一個傾斜DIV如This 但我不能似乎得到的圖片都顯示：斜DIV沒有顯示

HTML：

<div class="headerLine"> 

</div>

CSS：

.headerLine{ 
    position: relative; 
    width: 100%; 
    overflow: hidden; 
    height:100%; 
    background-image: url("../Images/back1.jpg"); 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
} 
.headerLine:after{ 
    content: ""; 
    position: absolute; 
    z-index: 1; 
    pointer-events: none; 
    bottom: 0; 
    left: 0; 
    width: 100%; 
    /* background: url(../images/sliderL.png) center center no-repeat; */ 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    border-bottom: 150px solid white; 
    border-left: 3000px solid transparent; 
}

打造其作爲傾斜上面貼的例子一個div任何幫助，第一個格，將是巨大的

來源

2017-10-14 RonTheOld

這裏的問題是在div中的height: 100%。它是那個元素的父母，所以父母的身高是多少？如果它沒有設置任何東西，那麼瀏覽器沒有什麼可引用的。

你可以使用vh（視圖高度）來解決這個問題。

SEE CODEPEN EXAMPLE

來源

2017-10-14 01:20:44 DollarChills

至於你提到的背景沒有顯示，我得到的理由，就是你有沒有放在DIV中的任何內容，所以如何一些背景將會出現。

您可以放置一些內容或使用一些靜態高度，如100vh。

[SEE THE EXAMPLE][1] 




[1]: https://codepen.io/hardenrahul/pen/NaLeNv

來源

2017-10-14 07:27:13

斜DIV沒有顯示

回答

相關問題