Warning: file_get_contents(/data/phpspider/zhask/data//catemap/7/css/41.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Html safari不显示标题背景图像_Html_Css_Twitter Bootstrap_Mobile Safari - Fatal编程技术网

Html safari不显示标题背景图像

Html safari不显示标题背景图像,html,css,twitter-bootstrap,mobile-safari,Html,Css,Twitter Bootstrap,Mobile Safari,在我的网站中,顶部标题背景和“Kreation Team”Div背景没有显示在iPad和iPhone上的safari中,但在iMac和macbooks上可以看到。我的意思是,在小型设备中,背景图像不可见 如果你单独使用Chrome和safari,你可以看到两者的区别。。。 请帮助解决这个问题` HTML 控制台中也有一个错误 Uncaught Error: Bootstrap's JavaScript requires jQuery version 1.9.1 or higher, but lo

在我的网站中,顶部标题背景和“Kreation Team”Div背景没有显示在iPad和iPhone上的safari中,但在iMac和macbooks上可以看到。我的意思是,在小型设备中,背景图像不可见

如果你单独使用Chrome和safari,你可以看到两者的区别。。。 请帮助解决这个问题`

HTML

控制台中也有一个错误

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

控制台错误是因为您没有在HTML中加载jQuery。您需要添加以下内容:

这也可能是导致图像出现问题的原因。如果您仍然遇到问题,请提供一个工作示例。尝试用代码创建or,并将链接附加到原始帖子中


编辑:我刚看了一下你的代码,由于
背景附件的原因,图像没有加载到Safari mobile上:修复了
stylesheet.css的
214
行中的
css类
.jumbotron
。如果将其从代码中删除,则图像可以正常工作。如果您需要将CSS保留在桌面上,只需使用一个简单的媒体查询来定位移动设备。

您有任何代码吗?在引导之前包括正确版本的jQuery。@Riya
您需要将jQuery版本降低到thn 3以下。您现在正在使用3.1.1。我更改了它,现在它可以工作了。我想知道为什么Safari mobile和平板电脑中没有显示标题背景?我在html文件的末尾包含了javascript。很抱歉没有包含在问题中。:)在上面的代码中,您正在加载jQuery 3.1.1。控制台错误告诉您需要加载jQuery 1.9.1或更高版本,但低于版本3。显然,版本3.1.1并不低于版本3,所以请尝试加载另一个版本。你可以使用我上面的代码,或者访问查看Google托管的jQuery库,只需在1.9.1和2.2.4之间选择一个。更改为2.2.4对我来说很有用。。。那么,是什么让这些图像无法在移动safari浏览器中显示呢@马修维需要背景附件是固定的,因为这使背景固定时,滚动效果。如果我删除附件,该效果将不起作用:已修复。你能告诉我safari小屏幕的媒体查询吗?iPhone 6s Plus(最大的iPhone屏幕)是414px宽,因此你可以使用以下代码删除
背景附件
,尝试
@media(最大宽度:415px){.jumbotron{background attachment:initial;}
.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