使用CSS修复移动设备的背景图片 | 使用CSS修复移动设备的背景图片

本文介绍了使用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设置在内容下方。
 
 
 这与 
 
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修复移动设备的背景图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！
                        1403页，肝出来的..