我的背景图片非常适合台式机,iO和某些Android设备,今天我才注意到,当我在android设备上更新chrome时,图片消失了(它在android-firefox上有效)。
我已经读到,background-size: cover
和background-repeat: no-repeat
的添加对某些人有用,但是我已经在CSS上添加了它,但是图片仍然没有出现。
这是我的CSS:
body .app-container {
background-image: url('myImage.png');
padding-top: 60px;
position: relative;
z-index: 1;
margin: 0 auto;
max-width: 500px;
min-height: 100vh;
background-color: #f9f9f9;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}
body .app-container:before {
content: '';
position: fixed;
top: 50%;
left: 50%;
width: 120vw;
height: 120vh;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
filter: blur(5px);
background: inherit;
background-color: #ddd;
background-blend-mode: overlay;
z-index: -2;
}
body .app-container:after {
content: '';
position: fixed;
top: 0;
left: 50%;
width: 100%;
max-width: 500px;
height: 100vh;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
background: inherit;
background-color: #333;
background-blend-mode: overlay;
z-index: -1;
}
它应该将图片显示为背景,并在顶部显示一层黑色,以使其具有阴影(“ .app-container:after”),但仅显示黑色。