使用CSS修复移动设备的背景图片 [英] Fixed Background Image for Mobile with CSS

问题描述

在CSS中使用 @media 来修复背景图片。逻辑告诉我这应该起作用，但是在实现这个之后我没有得到任何改变的结果。我已经包含了我正在覆盖的 body 代码。

手机：

  @media（min-width：768px） {
 body {
 background-position：center; 
 background-attachment：fixed; 
 
 
 $ / code $ / pre 
 $ b $ p  
 
 
  body {
 height：100％; 
 background-image：url（'../ design / image.jpg'）; 
背景重复：不重复; 
背景颜色：＃333; 
 background-position：center; 
 background-size：cover; 
 
  
 
 
解决方案 
  background-attachment：fixed; 在移动webkit上不起作用。有一个解决方法，你可以将图像内联放置在html中，将位置设置为固定，并将z-index设置在内容下方。
 
 
 
这与使用background-attachment：在safari上修复了ipad  
 
Using @media with CSS to fix the background image.  Logic tells me this should work, but I'm not getting any changed results after implementing this.  I've included the body code I'm working to overwrite as well.  

Mobile:
@media (min-width: 768px) {
   body {
     background-position: center;
     background-attachment: fixed;
   }
}
Desktop:
body {
   height: 100%;
   background-image: url('../design/image.jpg');
   background-repeat: no-repeat;
   background-color: #333;
   background-position: center;
   background-size: cover;
}

解决方案
background-attachment: fixed; does not work on mobile webkit. There is a workaround, you can place the image inline in the html, set the position fixed and z-index below the content.

this is related Using background-attachment:fixed in safari on the ipad

                        
这篇关于使用CSS修复移动设备的背景图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！