gpt4 book ai didi

css - 带文本/按钮的全屏图像(响应式)

转载 作者:太空宇宙 更新时间:2023-11-03 18:47:29 25 4
gpt4 key购买 nike

我正在为一个客户做一个复杂的元素。我设计了一个全屏登陆页面,需要兼容所有大小的窗口/移动设备(响应式)。目前我无法定位图像以覆盖整个页面。 div( slider 全宽)需要跨越整个窗口。我提供了一张图片来展示我想要实现的目标。我正在使用骨架框架。 http://www.getskeleton.com/在这个全屏登陆页面之后,您必须能够继续向下滚动才能看到页面的其余内容。

This has to occupy the entire screen on all devices

我的 HTML:

  <div id="slider-full-width">
<div class="container">
<h2>Seeking a refreshening management service?</h2>
<h2>You've come to the right place</h2>
<div id="button-bg">
<a href="properties.html" class="presentation-button">Properties</a>
<a href="#body-span-class" class="presentation-button">See why</a>
</div>


我的 CSS:

    #slider-full-width{
width: 100%;
background-image: url('../img/slide-01.jpg');
position:relative;
text-align: center;}
#slider-full-width h2 {
color: #efefef;

提前致谢!

最佳答案

我不知道为什么它会在顶部留下空白,但我已经为您创建了一个 jsfiddle 来展示我为删除它所做的工作:http://jsfiddle.net/sKzCc/

HTML:

<div id="slider-full-width"> <div class="container">   <h2>Seeking a
refreshening management service?</h2> <h2>You've come to the right
place</h2> <div id="button-bg"> <a href="properties.html"
class="presentation-button">Properties</a>
<a href="#body-span-class" class="presentation-button">See why</a> </div>

CSS:

#slider-full-width{ max-width: 100%; min-height:800px; background: url('http://www.wherelionsroam.co.uk/image/two.jpg') no-repeat center
center fixed; -webkit-background-size: cover; -moz-background-size:
cover; -o-background-size: cover; background-size: cover;
position:relative; text-align: center; } #slider-full-width h2 {
color: #efefef; margin-top:-20px; font-size: 25.29pt; padding-top:
285px; text-shadow: 1px 1px 1px #000; }

我为所有主要浏览器添加了 background-size:cover 标签,以确保最大的跨浏览器兼容性。我希望这个解决方案对你有用!

关于css - 带文本/按钮的全屏图像(响应式),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15962034/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com