CSS：div根據後臺響應圖像填充

我有一個父div有山的背景圖像。我有一個孩子的div有響應的房屋形象。當窗戶的垂直寬度發生變化時，我想給孩子div一個填充頂部，以便房屋保持他們在山下的位置。我使用較少的CSS。CSS：div根據後臺響應圖像填充

2016-04-22 Omer Yaqub

發表您的代碼到目前爲止 – LGSon

我要繼續前進，並以「我絕對不是最好的CSS」，但我相當肯定你要能夠與使用Viewport Height

這裏要實現的效果是一個快速的前言本下面的代碼段。您可能需要將vh更改爲vmin或vmax，具體取決於。

body, 
 
html { 
 
    height: 100%; 
 
} 
 
.parent { 
 
    background-image: url(http://placehold.it/400x600); 
 
    height: 100%; 
 
    background-repeat: no-repeat; 
 
} 
 
.child { 
 
    padding-top: 10vh; 
 
}

<div class="parent"> 
 
    <div class="child"> 
 
    Testing 
 
    </div> 
 
</div>

來源

2016-04-22 22:29:44 Jhecht

背景圖像響應所以山的位置發生變化時，垂直寬度的變化，我希望將房屋保持在相同的位置（山峯結束）。一種方法是，我可以每100px左右使用媒體查詢並定義填充頂部，但我想使用一個公式，以便將媒體查詢保持在最低限度。 –

豈不是更好，如果你應用position: absolute; bottom: 0的房子，和山區將有position: relative？

來源

2016-04-22 22:31:06 kasperoo

如果垂直寬度你的意思是高，你有JS 的jQuery的exaple做

if ($(window).height()) < 800 { 
    $(childdiv).css('pading-top','60px'); 
}

來源

2016-04-22 22:36:06

CSS：div根據後臺響應圖像填充

回答

相關問題