移動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上的背景圖像模糊

回答

相關問題