safari不顯示標題背景圖片

Question

在我的網站中，頂部標題背景和「Kreation Team」Div背景未在Safari和iPad上顯示，但可在imacs和Macbook上看到。我的意思是在小型設備中背景圖像不可見。

如果您在Chrome和Safari去單獨就可以看到區別... 請幫助如何解決這個問題？`

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 

<div class="jumbotron"> 
    <div class="container-fluid"> 
      <nav class="row pull-right hidden-xs" style="padding:20px 20px 0 0;"> 
       <ul style="font-size: 15px;"> 
        <li><a href="http://kreationhandlooms.com" alt="Kreation House of Cotton home page">Home</a></li> 
        <li><a href="http://kreationhandlooms.com/aboutus" alt="Kreation House of Cotton about us page">About Us</a></li> 
        <li><a href="http://kreationhandlooms.com/branches" alt="Kreation House of Cotton contact us page">Branches</a></li> 
        <li><a href="http://kreationhandlooms.com/gallery" alt="Kreation House of Cotton gallery page">Gallery</a></li> 
       </ul> 
      </nav> 

      <div class="row-fluid"> 
       <div class="col-sm-7 col-xs-7"> 
        <h1>KREATION <br>House of Cotton</h1> 
        <h2 style="font-weight: bold;padding-bottom: 30px;">Srilankan Quality Handloom Manufacturer</h2> 
        <button class="jumbo-btn hidden-xs" onclick=" 
        location.href='http://kreationhandlooms.com/aboutus';" alt="Kreation House of Cotton about us page">About Us</button> 
       </div> 

       <div class="col-sm-5 col-xs-5"> 

       </div> 
      </div> 
    </div> 
</div> 

CSS

.jumbotron{ 
background-image: url("images/silk saree.jpg"); 
background-size: cover; 
background-position: center 10%; 
background-repeat: no-repeat; 
background-attachment: fixed; 
height: 720px; 
width: 100%; 
font-family: nexabold; 
margin: 0; 
padding: 0; 
} 

@media only screen and (min-width: 510px) and (max-width: 2000px){ 
.jumbotron .container-fluid .row-fluid{ 
padding:160px 0 0 10px; 
} 
} 

@media only screen and (min-width: 100px) and (max-width: 510px){ 
.jumbotron .container-fluid .row-fluid{ 
padding-top: 80px; 
} 
} 

.jumbo-btn{ 
padding:10px 20px; 
border: 3px solid white; 
border-radius: 5px; 
font-size: 18px; 
background:transparent; 
transition: all 0.4s; 
} 

.jumbotron h1{ 
font-weight: bold; 
} 

.jumbo-btn:hover{ 
background-color: grey; 
color: white; 

border:3px solid white; 
} 

@media only screen and (min-width: 200px) and (max-width: 760px){ 
.jumbotron .row-fluid h1{ 
margin:0 0 30px 0; 
font-size: 45px; 
font-weight: bold; 
} 

有在控制檯中也有錯誤

Uncaught Error: Bootstrap's JavaScript requires jQuery version 1.9.1 or higher, but lower than version 3 

Answer 1

您的控制檯錯誤是由於您未在HTML中加載jQuery。你需要的線沿線的添加的東西：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

這也可能是什麼導致你的圖像的問題。如果您仍然遇到問題，那麼有一個有效的例子會有幫助。嘗試使用您的代碼創建CodePen或JSFiddle，然後將鏈接附加到原始帖子。

編輯：我剛剛看了一下你的代碼，圖像不上的CSS類.jumbotron的stylesheet.css214線加載在Safari移動因爲background-attachment: fixed。如果您從代碼中刪除該圖片，則圖片可以正常工作。如果您需要保留桌面CSS，只需使用簡單的媒體查詢來定位移動設備即可。