移动设备上的背景图片模糊 ios

Question

这可能是一个菜鸟问题，但是，我似乎无法找到解决我遇到的问题的方法。在我的网站上，我有一张背景图片，在任何屏幕尺寸的桌面上都可以很好地呈现，但在移动设备上查看时会变得模糊不清。我已经看到几个类似的问题，要么没有答案，要么解决方案对我不起作用，我们将不胜感激。
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;
}

Answer 1

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

 background-position: center center;

Answer 2

堆栈中已经有类似的答案，

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

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

Answer 3

编辑：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>

移动设备上的背景图片模糊 ios

Background image blurry on mobile ios

css

mobile

ios

web

responsive