背景图片在Android设备上不起作用

时间:2019-07-01 22:32:56

标签: css

我的背景图片非常适合台式机,iO和某些Android设备,今天我才注意到,当我在android设备上更新chrome时,图片消失了(它在android-firefox上有效)。

我已经读到,background-size: coverbackground-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”),但仅显示黑色。

0 个答案:

没有答案