背景图像:或背景图像:未显示在网站上，img src 也未显示。
但是，所有图片仅在 chrome 桌面浏览器上显示良好，但在 chrome 移动浏览器上不显示。我测试过但不在我的网站上显示图像的一些浏览器是:chrome mobile、safari mobile、IE desktop、Microsoft edge desktop。
完整的 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桌面，Microsoft edge桌面
最佳答案
获得https后，我使用letsencrypt获得免费的sll证书，它解决了问题。换句话说，获取 https 现在允许图像显示在 chrome mobile、safari mobile、(chrome 桌面，但它们已经显示在这里)、IE 桌面上。总的来说，获取 https 它为我解决了这个问题。
关于html - CSS 背景和背景图像只显示在 chrome 桌面浏览器上，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54411477/