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

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

Answer 2

堆栈上已有类似的答案，

你可能有背景位置的问题：固定和背景大小：一起使用时覆盖。尝试删除第一个，看看问题是否仍然存在。

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

Answer 3

尝试在css上包含一个中心位置，看看是否有帮助。

 background-position: center center;

背景图象模糊在移动ios

3 个答案: