CSS background 和 background-image 仅显示在 chrome 桌面浏览器上答案

【问题标题】：CSS background and background-image only shows up on chrome desktop broswerCSS background 和 background-image 仅显示在 chrome 桌面浏览器上
【发布时间】：2019-06-22 00:22:21
【问题描述】：

背景图片：或背景图片：没有出现在网站上，img src 也没有出现。

但是，所有图片只能在 chrome 桌面浏览器上正常显示，但不会在 chrome 移动浏览器上显示。我测试过但未在我的网站上显示图像的一些浏览器是：chrome 移动版、Safari 移动版、IE 桌面版、Microsoft Edge 桌面版。

整个html css代码都可以在网站上找到，可以在我的帖子中包含链接吗？样式.css

.wrapper {
    background: #fff;
    margin-top: 20px;
    margin-bottom: 20px;
    padding: 0 0;
    box-shadow: 0px 2px 5px rgba(0,0,0,0.5);
    -moz-box-shadow: 0px 2px 5px rgba(0,0,0,0.5);
    -webkit-box-shadow: 0px 2px 5px rgba(0,0,0,0.5);
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
    background-image: url('./imgSrc/chessbk.png');
    background-position: center;
    background-size: cover;
    /*        background-attachment: fixed;*/
    /*    -o-background-size: cover;*/
    /*-moz-background-size: cover;*/
    /*-webkit-background-size: cover;*/
}

/* Main page style */
.wrapper .main {
    position: relative;
    clear: both;
    overflow: hidden;
    height: auto;
    min-height: 100%;
    padding: 0 0 0 0;
}


.main {
    background-image: linear-gradient(rgba(172, 207, 229, 1), rgba(172, 207, 229, .1));
    clear: both;
    overflow: hidden;
    padding: 0px 0 0 0;
} /*----end main page styles---*/

/* Main page header style */
.header {
    position: relative;
    z-index: 1;
}

.header .headerIMG {
    -moz-border-radius: 8px 8px 0px 0px;
    -webkit-border-radius: 8px 8px 0px 0px;
    border-radius: 8px 8px 0px 0px;
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    opacity: .3;
    width: 100%;
    height: 100%;
}

.siteTitle {
    padding-top: 25px;
    text-align: center;
    margin: 0 auto;
    width: 940px;
    position: relative;
    color: floralwhite;
    padding-bottom: 25px;
} /*-----end header styles----*/

/* Navigation styles */
#access {
    background: url('./imgSrc/access_bg.png');
    /*
    opacity: 0.8;
    filter:alpha(opacity=80);
    */
    display: block;
    float: left;
    margin: 0 auto;
    width: 940px;
    font-weight:bold;
    border-top:1px solid rgba(0,0,0,0.5);
    border-bottom:1px solid rgba(0,0,0,1);
}

使用背景案例：HTML

<body>
        <div class="wrapper">
            <div class="header">
                <div class="headerIMG" style="background: url(imgSrc/planet.jpg) no-repeat center bottom;">
                </div>

                <div class="siteTitle">
                    <h1> Rocky Mountain Chess Rating System</h1>
                    <h2> Idaho Chess Association Database</h2>
                </div>

在上面的html文件中再往下：

 <div class="main">
                <div class="icaImg">
                    <a href="https://www.idahochessassociation.com/"> <img src="imgSrc/icaLogo.png"> </a>
                </div>
                <div id="contentGameEnter">
                    <div class="enterGame">

刚刚测试过，这是一个更新编辑，图像出现在 safari 桌面和 Firefox 桌面上。所以不工作的浏览器是移动浏览器和IE桌面，微软边缘桌面

【问题讨论】：

请向我们展示您的代码。
@Markus 我可以发布代码所在网站的链接吗？
建议从整个代码中提取与您的问题相关的部分，并将其添加到本帖中。
好的，请停止投票添加代码
编码。我可以添加任何其他可能对解决此问题很重要的代码，但我很确定我包含了必要的代码。

标签： html css

【解决方案1】：

获得https后，我使用letsencrypt获得免费的sll证书，它解决了问题。换句话说，获取 https 现在允许图像显示在 chrome 移动版、safari 移动版（chrome 桌面，但它们已经在此处显示）、IE 桌面上。总的来说，获取 https 它为我解决了这个问题。

【讨论】：