Question

在我的网站中，顶部标题背景和＆＃34; Kreation Team＆＃34; Div背景不会在ipads和iphone上的safari中显示，但它在imacs和macbooks上可见。我的意思是在小型设备中，背景图像不可见。

如果你单独进入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，并将链接附加到原始帖子。

修改：我刚刚查看了您的代码，由于background-attachment: fixed 214 stylesheet.css .jumbotron，因此未在Safari移动版中加载图片对于CSS类$.get("url for web service").done(function(data) { // Assuming data returns as an array, if not - convert it to one. $("#auto-complete-input").autocomplete({ source: data }); })。如果从代码中删除它，图像工作正常。如果您需要保留桌面的CSS，只需使用简单的媒体查询来定位移动设备。

safari不显示标题背景图像

1 个答案: