[英]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.