ios手机背景图片模糊答案

【问题标题】：Background image blurry on mobile iosios手机背景图片模糊
【发布时间】：2016-10-31 04:34:33
【问题描述】：

这可能是一个菜鸟问题，但是，我似乎找不到任何解决我遇到的问题的方法。在我的网站上，我有一个背景图像，可以在任何屏幕尺寸的桌面上完全呈现，但在移动设备上查看时会变得一团糟。我看到了几个类似的问题，要么没有答案，要么没有对我有用的解决方案，我们将不胜感激。
Here is the website

这里有一些我正在经历的截图。这是我的代码。

<div class="jumbotron"> <h1 class="text-center" id="head">Kyle Goode</h1> <p class="text-center" id="header">Full Stack Web Developer</p> </div> </div>

  .home {
  background: url(http://mrg.bz/VN5LDd) fixed no-repeat center;
  background-attachment: fixed;
  background-size: cover !important;
  max-width: 100%;
  height: 900px;
  border-top: 1px solid black;
  border-bottom: 1px solid black;
}

【问题讨论】：

标签： ios css mobile web responsive

【解决方案1】：

编辑：Valentino Kožinec 是正确的。似乎是一个 iOS 问题，已修复并覆盖。

将 .home 更改为：

.home {
  background: url(http://mrg.bz/VN5LDd) no-repeat center;

并删除

background-attachment: fixed;

它似乎有效。

你有 Doctype 和 head 标签，然后在你的身体里你又拥有它们。这可能会导致您的问题。值得一看。

这是从您的网站复制并粘贴到此处的：

    <!DOCTYPE html>
<html >
  <head>
    <meta charset="UTF-8">
    <title>Portfolio </title>
    <meta name="viewport" content="width=device-width, initial-scale=1">



        <link rel="stylesheet" href="css/style.css">




  </head>

  <body>

    <!DOCTYPE html>
<html lang="en">

<head>

  <!--Meta -->
  <title>Goode Web Development</title>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">

<link rel="stylesheet" href ="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">


  <link href='https://fonts.googleapis.com/css?family=Montserrat:700,400' rel='stylesheet' type='text/css'>

  <link href='https://fonts.googleapis.com/css?family=Roboto:300italic' rel='stylesheet' type='text/css'>

 <script   src="https://code.jquery.com/jquery-2.2.4.min.js"   integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="   crossorigin="anonymous"></script>

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>



 </head>

【讨论】：

这很有意义，谢谢杰森！解决了它，感谢您指出头部声明！
没问题。很高兴我能帮上忙！
这个解决方案刚刚赚了我 70 美元，如果我们见面我会请你喝啤酒！谢谢你:)
这个解决方案仍然有效，只是修复了我客户的一个站点。

【解决方案2】：

堆栈上已经有类似的答案了，

您可能对 background-position: fixed 和 background-size: cover 在一起使用它们时遇到了问题。尝试删除第一个，看看问题是否仍然存在。

您可能可以对 .home 类进行媒体查询并放置裁剪的图像或其他解决方法。

【讨论】：

感谢您观看华伦天奴！我已经阅读了您所指的问题，但我使用的是固定而不是位置的背景附件。我使用的唯一背景位置是 Hemchand 建议的中心位置。删除我的背景附件对背景图像的模糊度没有影响。

【解决方案3】：

尝试在你的 CSS 中添加一个中心位置，看看是否有帮助。

 background-position: center center;

【讨论】：

感谢您的回答，但这似乎没有效果。