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

Question

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

8

这可能是一个新手问题，但我似乎找不到任何解决方案来解决我的问题。在我的网站上，我有一个背景图片，在桌面上的任何屏幕大小上呈现得非常好，但在移动设备上查看时变成了模糊的一团。我已经看到几个类似的问题，要么没有答案，要么提供的解决方案对我无效。非常感谢您能提供帮助。
这是网站链接以下是我遇到的情况的一些截图。

这是我的代码。

<div class="jumbotron">
        <h1 class="text-center" id="head">Kyle Goode</h1>
        <p class="text-center" id="header">全栈 Web 开发人员</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;
}

- kgoode517

3个回答

4

在Stack上已经有类似的答案了，

你可能使用background-position:fixed和background-size:cover两个属性时遇到了问题。尝试先去掉第一个属性，看看问题是否还存在。

然后你可以为.home类添加媒体查询，并放置裁剪后的图像或其他解决方法。

- Valentino Kožinec

谢谢您查看，瓦伦蒂诺！我已经阅读了您所提到的问题，但我正在使用背景附着固定而不是位置。我只使用了中心中心的背景位置，这是Hemchand建议的。删除我的背景附着对我的背景图像模糊没有影响。 - kgoode517

0

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

 background-position: center center;

- Hemchand

谢谢您的回答，但似乎没有任何效果。 - kgoode517

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jason Godson · Accepted Answer

编辑：瓦伦蒂诺·科日涅茨是正确的。似乎是iOS固定和覆盖问题。

将".home"更改为以下内容：

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

并移除

background-attachment: fixed;

看起来是可以的。

你有 Doctype 和 head 标签，然后在 body 中又有它们。这可能导致你出现问题。值得一看。

这是从你的网站复制并粘贴到这里的：

    <!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>