背景图像不显示在小设备上CSS

问题描述：

背景图像不显示在小设备上CSS。我有一个可以通过CSS放大的背景图片，但是当屏幕变得更小时，背景图片会消失并呈白色。我正在尝试制作应用程序，因此它需要适用于所有设备和尺寸。当它没有放大时，它确实工作正常。我在下面粘贴了我的代码。由于背景图像不显示在小设备上CSS

* {-webkit-tap-highlight-color: rgba(0, 0, 0, 0):} 

body { 
-webkit-touch-callout: none; 
/* prevent callout to copy image, etc when tap to hold */ 
-webkit-text-size-adjust: none; 
/* prevent webkit from resizing text to fit */ 
-webkit-user-select: none; 
/* prevent copy paste, to allow, change 'none' to 'text' */ 
background-color: #E4E4E4; 
); 
background-attachment: fixed; 
} 

/* Portrait layout (default) */ 

.app { 
position: absolute; 
/* position in the center of the screen */ 
background-position: center; 
position: relative; 
bottom: -300px; 
font-family: 'Roboto', sans-serif; 
} 

/* Landscape layout (with min-width) */ 

@media screen and (min-aspect-ratio: 1/1) and (min-width:400px) { 

h1 { 
    font-size: 90px; 
    font-weight: normal; 
    margin: 0px; 
    overflow: visible; 
    padding: 0px; 
    text-align: center; 
    color: white; 
    font-family: 'Roboto', sans-serif; 
} 
p { 
    color: blue; 
    font-family: 'Roboto', sans-serif; 
    font-size: 15px; 
    text-align: center; 
    color: white; 
} 
.event { 
    border-radius: 4px; 
    -webkit-border-radius: 4px; 
    color: #FFFFFF; 
    font-size: 12px; 
    margin: 0px 30px; 
    padding: 2px 0px; 
} 
.createAnAccount { 
    padding-bottom: 10px; 
    padding-top: 10px; 
    font-size: 15px; 
} 
.logintable { 
    text-align: center; 
} 
.login { 
    padding-bottom: 10px; 
    padding-top: 10px; 
    font-size: 15px; 
} 
.event.listening { 
    background-color: #333333; 
    display: block; 
} 
.event.received { 
    background-color: #4B946A; 
    display: none; 
} 
@keyframes fade { 
    from { 
     opacity: 1.0; 
    } 
    50% { 
     opacity: 0.4; 
    } 
    to { 
     opacity: 1.0; 
    } 
} 
@-webkit-keyframes fade { 
    from { 
     opacity: 1.0; 
    } 
    50% { 
     opacity: 0.4; 
    } 
    to { 
     opacity: 1.0; 
    } 
} 
.blink { 
    animation: fade 3000ms infinite; 
    -webkit-animation: fade 3000ms infinite; 
} 
.bg { 
    position: fixed; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    z-index: -999; 
} 
.background { 
    background: #22313F; 
    background-image: url(https://i.ytimg.com/vi/b7WD- 
    SpNX_I/maxresdefault.jpg); 
    background-size: cover; 
    width: 100%; 
    height: 100%; 
    animation: zoom 12s forwards ease-out;

下面

<body> 
    <div class="bg"> 
     <div class="background"></div> 
    </div> 
<body>

答

你@media查询的HTML代码已经minimun像素的限制。如果你删除这个，它会起作用。所以改变这一行

@media screen and (min-aspect-ratio: 1/1) and (min-width:400px)

到此

@media screen and (min-aspect-ratio: 1/1)

通过设置最小宽度你仅在视口是400个像素宽或更宽应用此背景变化。

但是，谢谢你，它似乎没有工作。我减少了px，然后用你的代码替换了它，但没有运气。 –

你是否说当你删除它并调整屏幕大小时，它仍然会在400 px以下变成白色？ –

是的我在说 –

背景图像不显示在小设备上CSS

相关推荐