Question

背景图片或背景图片：未显示在网站上，或者img src也未显示。

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

可以在网站上找到整个html CSS代码，是否允许在我的帖子中包含链接？ styles.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桌面，Microsoft Edge桌面

Answer 1

一旦获得https，我就使用letencrypt来获得免费的sll证书，它解决了这个问题。换句话说，获取https现在可以将图片显示在chrome移动版，safari移动版（chrome桌面，但已在此处显示），IE桌面上。总体而言，使用https可以为我解决此问题。

CSS背景和背景图片仅显示在Chrome桌面浏览器中

1 个答案: