Jos*_*osh 52 html css mobile-safari
嗨,我的页面上有几个div,它们有背景图像,我想扩展以覆盖整个div,而div又可以扩展以填充视口的宽度.
显然,background-size: cover在iOS设备上出现意外行为.我已经看到了一些如何修复它的例子,但我不能让它们在我的情况下工作.理想情况下,我不想<img>在HTML中添加额外的标签,但如果这是唯一的方法,那么我会.
这是我的代码:
.section {
margin: 0 auto;
position: relative;
padding: 0 0 320px 0;
width: 100%;
}
#section1 {
background: url(...) 50% 0 no-repeat fixed;
background-size: cover;
}
#section2 {
background: url(...) 50% 0 no-repeat fixed;
background-size: cover;
}
#section3 {
background: url(...) 50% 0 no-repeat fixed;
background-size: cover;
}<body>
<div id="section1" class="section">
...
</div>
<div id="section2" class="section">
...
</div>
<div id="section3" class="section">
...
</div>
</body>问题是,如何考虑浏览器的可变宽度和div中内容的可变高度,如何让背景图像完全覆盖div部分？
mku*_*ayk 140
最近,我有过类似的问题,并意识到它不是由于background-size:cover而是background-attachment:fixed.
我通过使用iPhone的媒体查询并将background-attachment属性设置为来解决了这个问题scroll.
对于我的情况:
.cover {
background-size: cover;
background-attachment: fixed;
background-position: center center;
@media (max-width: @iphone-screen) {
background-attachment: scroll;
}
}
编辑:代码块在LESS中并假定为其预定义变量@iphone-screen.感谢@stephband的通知.
Zon*_*ne6 12
我在最近构建的很多移动视图中遇到过这个问题.
我的解决方案仍然是一个纯粹的CSS后备
http://css-tricks.com/perfect-full-page-background-image/作为三个很好的方法,后两个是CSS3的封面不起作用的后退.
HTML
<img src="images/bg.jpg" id="bg" alt="">
CSS
#bg {
position: fixed;
top: 0;
left: 0;
/* Preserve aspect ratio */
min-width: 100%;
min-height: 100%;
}
也贴在这里:"背景大小:封面"不包括手机屏幕
这适用于Android 4.1.2和iOS 6.1.3(iPhone 4)以及桌面交换机.为响应式网站撰写.
以防万一,在您的HTML头中,这样的事情:
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
HTML:
<div class="html-mobile-background"></div>
CSS:
html {
/* Whatever you want */
}
.html-mobile-background {
position: fixed;
z-index: -1;
top: 0;
left: 0;
width: 100%;
height: 125%; /* To compensate for mobile browser address bar space */
background: url(/images/bg.jpg) no-repeat;
background-size: 100% 100%;
}
@media (min-width: 600px) {
html {
background: url(/images/bg.jpg) no-repeat center center fixed;
background-size: cover;
}
.html-mobile-background {
display: none;
}
}
网上有一些答案试图解决这个问题，但没有一个对我来说是正确的。目标：把背景图像上body，并有background-size: cover;工作手机，没有媒体查询，overflows或哈克z-index: -1; position: absolute;覆盖。
这是我为解决此问题所做的工作。即使键盘抽屉处于活动状态，它也适用于 Android 上的 Chrome。如果有人想测试 iPhone，那会很酷：
body {
background: #FFFFFF url('../image/something.jpg') no-repeat fixed top center;
background-size: cover;
-webkit-background-size: cover; /* safari may need this */
}
这就是魔法。将html其视为具有相对于实际视口的强制比例高度的包装器。你知道经典的响应式标签<meta name="viewport" content="width=device-width, initial-scale=1">吗？这就是使用 的原因vh。此外，从表面上看，似乎body应该得到这些规则，而且看起来还可以……直到键盘打开时高度发生变化。
html {
height: 100vh; /* set viewport constraint */
min-height: 100%; /* enforce height */
}
| 归档时间： |
|
| 查看次数： |
155078 次 |
| 最近记录： |