背景图像未显示在手机上,但显示在桌面上
background-image not showing on mobile but showing on desktop
我在compare.comxa.com上建立并运行了一个登录页……当我试图在我的android设备上查看时,只有表单显示,背景图像在哪里都找不到。请你帮忙。这是代码
body {
height:100%;
background: url("http://bit.ly/1MOnMVB") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
}
#mc_embed_signup {
background:#fff;
clear:left;
font:14px Helvetica,Arial,sans-serif;
position:absolute;
top:85px;
left:35px;
border-radius:5px;
}
h2 {
color:orange;
font-weight:bold;
text-align:center;
}
h5 {
color:#483D8B;
text-align:center;
}
<!DOCTYPE HTML>
<html>
<head>
<title>black friday deals</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="author" content="ataga austin">
<meta name="keywords" contents="black friday,deals,black firday deals,black friday deal comapre">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" integrity="sha512-K1qjQ+NcF2TYO/eI3M6v8EiNYZfA95pQumfvcVrTHtwQVDG+aHRqLi/ETn2uB+1JqwYqVG3LIvdm9lj6imS/pQ==" crossorigin="anonymous"></script>
<!-- Begin MailChimp Signup Form -->
<link href="//cdn-images.mailchimp.com/embedcode/classic-081711.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class=" col-xs-12 col-md-12">
<div class="row">
<div class=" col-xs-12 col-md-4">
<div id="mc_embed_signup">
<form action="//comxa.us12.list-manage.com/subscribe/post?u=3380c08f529e58f0eadc50f43&id=ab83c00a63" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
<h2>Best Black Friday Deals</h2>
<h5>Compare Prices Across Your Favourite Stores</h5>
<div class="indicates-required"><span class="asterisk">*</span> indicates required</div>
<div class="mc-field-group">
<label for="mce-EMAIL">Email Address <span class="asterisk">*</span>
</label>
<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" placeholder=" something@some.com">
</div>
<div class="mc-field-group">
<label for="mce-FNAME">Name </label>
<input type="text" value="" name="NAME" class="" id="mce-NAME" placeholder=" smith davis">
</div>
<div class="mc-field-group">
<label for="mce-PRODUCT">PRODUCT </label>
<input type="text" value="" name="PRODUCT" class="" id="mce-PRODUCT" placeholder="apple tv" >
</div>
<div class="mc-field-group">
<label for="mce-LNAME">FAVORITE STORE </label>
<input type="text" value="" name="STORE" class="" id="mce-STORE" placeholder=" amazon">
</div>
<div id="mce-responses" class="clear">
<div class="response" id="mce-error-response" style="display:none"> </div>
<div class="response" id="mce-success-response" style="display:none"> </div>
</div> <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_3380c08f529e58f0eadc50f43_ab83c00a63" tabindex="-1" value=""></div>
<div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="btn btn-success"></div>
</div>
</form>
</div>
</div>
<script type='text/javascript' src='//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js'></script>
<script type='text/javascript'>(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';fnames[1]='FNAME';ftypes[1]='text';fnames[2]='PRODUCT';ftypes[2]='text';fnames[3]='STORE';ftypes['3']='text';}(jQuery));var $mcj = jQuery.noConflict(true);</script>
<!--End mc_embed_signup-->
</div>
</div>
</div>
</div>
</body>
</html>
看起来您正试图从受保护的ftp服务器加载背景图像。仅适用于以下格式ftp://user:password@server.tld
但这显然是不推荐的(明文中的密码!)
因此,与其做一些愚蠢的事情,比如将文件移动到web服务器上的正确目录,然后像这样引用它:background-image: url(bkg1.jpeg);
背景图像未加载,因为它无法访问您拥有图像的帐户。只需更改图像url,它就会在中工作
background: url("http://www.wallpapereast.com/static/images/HD-Wallpapers1_Q75eDHE.jpeg") no-repeat center center fixed;
相关文章:
- 从桌面读取python文件时高亮显示代码
- 使用图像数组列表的simplegallary.js显示适合桌面屏幕的图像
- 如何在plnkr.co上显示桌面上的图像
- 肉桂:修改“显示桌面”(+其他系统小程序)图标
- Google Maps Javascript API v3 地图显示在桌面浏览器上,但不会显示在移动浏览器上
- 通知权限被拒绝(桌面推送通知).通知弹出窗口不会't以镀铬显示
- 为什么 Jquery 移动显示移动友好在桌面浏览器上看起来很友好
- 仅当标签页处于非活动状态时,才会显示 Chrome 桌面通知
- 是否可以在桌面通知正文JavaScript中显示图标
- 我的网站在移动版式镶版式右侧显示空白区域,但桌面版式版式显示空白区域
- 根据移动/桌面操作系统在网站上显示不同的按钮/下载链接
- 禁用JavaScript:如何显示移动和桌面的不同消息
- 如何使用extjs在桌面/面板中显示隐藏的小部件
- jquery.hide()函数-隐藏手机,显示桌面
- 在'上显示覆盖;draginter'将文件从桌面拖动到浏览器时
- 我的谷歌地图javascript代码显示在桌面浏览器,但不是我的手机浏览器
- 使用纯Javascript仅在移动设备上显示点击列表的内容,并最初显示在桌面
- 如何在桌面显示时附加普通jQuery,在移动端显示时附加jQuery Mobile ?
- 在Ionic框架中,鼠标进入和鼠标移动不会在桌面(触摸显示)中触发
- 当我点击提交按钮时,我的javascript第一个警告框显示在移动设备中,但在桌面上运行良好