手机和平板电脑上的引导背景模糊答案

【问题标题】：Bootstrap background blurry on mobile and tablet手机和平板电脑上的引导背景模糊
【发布时间】：2018-02-01 18:30:05
【问题描述】：

我已经在网络上的任何地方（包括这里）寻找这个问题的答案。昨天我花了 4 个小时尝试不同的发现“解决方案”，但无济于事。我只有在彻底研究并尝试了所有其他方法（包括我在 Stack Exchange 上找到的所有答案）后才在此处发布。

我正在使用 Bootstrap Bootstrap v3.3.4

我有一个带有整页背景图片的网站。当我在 Firefox 或其他桌面浏览器中调整窗口大小时，即使一直缩小到最小尺寸，背景图像（砖墙）也会调整大小并完美呈现。

但是，当我在手机（LG）或 iPad 5 上打开该网站时，背景是巨大的，并且只显示了部分、非常模糊的背景部分。（即，一块非常模糊的砖的一小部分！）

这是我的 CSS 文件中的代码：

 body {
     background: url(../img/bg.jpg);
    background-repeat: no-repeat; 
    background-attachment: fixed;
    background-size: cover;

}

我还尝试根据网络上的“解决方案”添加此内容。它没有任何改变。

body:after{
  content:"";
  position:fixed; /* stretch a fixed position to the whole screen */
  top:0;
  height:100vh; /* fix for mobile browser address bar appearing disappearing */
  left:0;
  right:0;
  z-index:-1; /* needed to keep in the background */
  background: url(../img/bg-mobile.jpg) center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;

}

我尝试创建一个 768 像素宽的图像并插入以下内容：

@media screen and (max-width:768px) {
body {
/* The file size of this background image is 93% smaller
 * to improve page load speed on mobile internet connections */
     /* Location of the image */
       background: url(../img/bg-mobile.jpg);

} }

请注意，该 url 指向一个专门为移动设备创建的文件。

还是没有骰子。

我深感沮丧和困惑。请记住，我是一名自学成才的程序员，因此非常感谢实际的代码示例/清晰的解释。

衷心感谢你们。 :)

【问题讨论】：

标签： twitter-bootstrap mobile background tablet blurry

【解决方案1】：

我想推荐的（因为它以前发生在我身上）是删除固定在移动设备上的背景附件。它会减小尺寸，看起来会更好。无论如何，我还想推荐使用至少 1680 像素宽的图像。 Here 一个好帖子。

【讨论】：