移动ios上的背景图像模糊

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

以下是我所经历的一些截图。这里是我的代码。移动ios上的背景图像模糊

<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; 
}

来源

2016-06-28 kgoode517

编辑：瓦伦蒂诺Kožinec是正确的。似乎是一个固定和封面的iOS问题。

变化。家里这样：

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

，并删除

background-attachment: fixed;

看来工作。

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

这被复制，并从您的网站粘贴在这里：

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

来源

2016-06-30 02:43:24

非常感谢杰森！这一点解决了，谢谢你指出头声明！ – kgoode517

没问题。很高兴我能帮上忙！ –

尝试，包括在你的CSS的中心位置，看看有没有什么帮助。

background-position: center center;

来源

2016-06-28 18:30:27 Hemchand

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

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

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

您可能比为.home类制作媒体查询并放置裁剪图像或其他解决方法。

来源

2016-06-28 19:29:53

感谢您看看华伦天奴！我已经读过你提到的问题，但我使用的是后台附件，而不是定位。我使用的唯一背景位置是Hemchand建议的中心位置。移除背景附件对我背景图像的模糊没有影响。 – kgoode517

移动ios上的背景图像模糊

回答

相关问题