修复了iOS中部分网站(div)的背景 [英] fixed background for part of a site (div) in iOS
问题描述
我想有一个固定位置的背景图像，该图像仅覆盖我网站的一个部分(实际上是两个部分，但是是独立的，所以没有区别).我在本节的容器DIV上使用此CSS:
I want to have a fixed position background image that covers the whole screen only for a section of my website (actually two sections, but independently, so there is no difference). I use this CSS on the container DIV of the section:
#wrapper {
background-image: url(../img/bg1_IMG_1509.jpg);
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
(注意:我使用单独的属性，而不是速记的background，希望它可以与更多设备和浏览器兼容，但似乎并非如此.)
(Note: I used the seperate properties instead of the shorthand background hoping that this would be compatible with more devices and browsers, but it doesn's seem to be like that.)
这在所有台式机和浏览器上以及在android上的某些浏览器中或多或少都有效，但在iOS中根本不起作用.在iOS中，背景不仅在滚动，而且在垂直方向上进行了极大的拉伸，因此背景图像的高度覆盖了整个DIV，该DIV具有很多内容并且在移动设备上变得很高，从而导致看到更多或更多内容.屏幕上的单个像素变少.因此，fixed和cover都不起作用.
This works more or less well in all desktop and browsers and also in some browsers on android, but not at all in iOS. In iOS, the background is not only being scrolled, but also extremely stretched vertically so that the height of the background image covers the whole DIV, which has a lot of content and becomes quite high on a mobile device, which leads to seeing more or less single pixel blown up on the screen. So, neither fixed nor cover work.
我知道/已经阅读了有关iOS固定位置解决方法的答案，该解决方法在<body>标记内使用DIV并获得了position: fixed和全屏背景图像.但是我不希望在整个正文中使用此方法，而只希望在两个(独立的)部分中使用，并且在这种情况下，无法使用解决方法.
I am aware / have read answers about fixed position workarounds for iOS that used a DIV inside the <body> tag which got position: fixed and a full-screen background image. But I don't want this on the whole body, but only in two (independent) sections, and in this situation that workaround can't be used.
推荐答案
我发现了这一点:
.bg {
background: url(image.jpg);
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
height: 100%;
width: 100%;
position: fixed;
background-position: center center;
background-repeat: no-repeat;
}
此处: https://css-tricks.com/forums/topic/full-page-backgrounds-on-ios-background-size-cover/page/3/
基本上，您将背景放在另一个div中，并将fixed属性赋予div而不是背景.您需要添加z-index:-1;并添加白色背景或其他将图片隐藏在您不希望看到的地方.
basically you put your background in another div and give the fixed attribute to the div instead of the background. You need to add z-index:-1; and add white background or whatever to hide the picture where you don't want to see it.
这篇关于修复了iOS中部分网站(div)的背景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
