Question

我一直无休止地在网上搜索这个问题的答案，并且遇到了许多对我来说似乎没有用的解决方案。我正在实现一个响应式网页设计，其背景图像需要覆盖屏幕并调整大小，以便宽度始终为100％并且不会被切断。它在桌面和移动设备上运行良好，但是当它是风景时我遇到了Ipad的问题。它被高度放大到图像的上角，因此您只能看到大约5％的图像。然后我拿出了背景定位动画，它现在根本没有显示图像。

对于大于768px的屏幕，我们使用一个图像，对于下面的较小设备，我们使用一个图像。这是代码：

HTML

<section id="fh5co-home" data-section="home" class="background ">
    <div class="container bg-image">

CSS

@media screen and (min-width: 768px) {
.background {
background-image: url(../images/desk.png);
background-repeat:no-repeat;
background-size:contain;
-webkit-background-size: contain;
-moz-background-size: contain;
-o-background-size: contain;
}
}

@media screen and (max-width:768px) {
.bg-image {
    background-image: url(../images/three.png);
    background-repeat:no-repeat; 
    background-size:cover;         
}
}

我尝试过使用包含和封面，以及将背景附件设置为固定。我也尝试删除“不重复”。

对此的任何见解将不胜感激。我很擅长实施，它让我疯狂！

背景图像没有在Ipad景观中调整大小或显示

0 个答案: