[英]Resize elements with cover background image
我不完全確定這是否應該如此簡單。 我一直在嘗試不同的方法,但似乎無法解決問題。
我的首頁上有一個封面部分,其中包含徽標和按鈕:
<section id="cover">
<div id="cover-caption" class="animated fadeInDown">
<p style="padding-bottom: 2rem;"><img src="http://bizcentralusa.com/wp-content/uploads/2016/05/placeholder-sample-logo.png" alt="Sample Logo" /></p>
<p class="lead">
<a class="btn btn-primary btn-lg" data-scroll href="#getStarted" role="button">GET STARTED <i class="fa fa-angle-right animated wobble infinite" aria-hidden="true"></i>
</a>
</p>
</div>
</section>
封面的背景是一台筆記本電腦的圖像,其中一半覆蓋了該頁面。 我希望徽標和按鈕位於頁面頂部和筆記本電腦屏幕的開始之間。
這就是我到目前為止所取得的成就(我認為對您來說,直觀地看到我想要實現的目標比讓我對其進行解釋更容易)...
通常,我會在#cover-caption容器上放一些填充,直到將其下推到所需位置為止,但這不適用於所有屏幕分辨率。 在我正在編輯的PC上,它看起來不錯,但是當我在Macbook上對其進行測試時,盡管徽標和按鈕位於相同的位置,但背景圖像已更改,因為瀏覽器的高度不同。 我想我要做的是獲取我的徽標和按鈕,以在瀏覽器窗口的高度更改時自動調整其位置,使其與背景圖像一起更改。 這有可能嗎?
通過CSS Flexbox和視口高度,這應該很容易。
#cover-caption{
display: flex;
height: 66vh;
flex-direction: column;
justify-content: center;
}
#cover-caption > *{
flex: 0 1 auto;
}
參見改編的小提琴
您應該嘗試像
#cover-caption{
display: block;width: 20%;margin: 20px auto;position: relative;top: 100px;
}
這可能會有所幫助。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.