javascript - 背景图像不显示在移动设备上但显示在桌面上

我在 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&amp;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>

最佳答案

看起来您正在尝试从 protected ftp 服务器加载背景图像。这仅适用于以下格式 ftp://user:password@server.tld 但显然不推荐这样做(明文密码!)

与其做一些愚蠢的事情，比如将文件移动到网络服务器上的正确目录，然后像这样引用它:background-image: url(bkg1.jpeg);

关于javascript - 背景图像不显示在移动设备上但显示在桌面上，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33891190/

javascript - 背景图像不显示在移动设备上但显示在桌面上

上一篇：用于过滤 json 数组的 Javascript 对象

下一篇：javascript - 更新从 Javascript 调用的 PHP 中的数据库表 "user"