Question

我试图根据屏幕尺寸显示不同的背景图像。我的CSS有：

@media only screen and (min-width : 320px) { body{background: url(../images/background/background_320.png) no-repeat ;} }
@media only screen and (min-width : 768px) { body{background: url(../images/background/background_768.png) no-repeat ;} }
@media only screen and (min-width : 1200px) { body{background: url(../images/background/background_1200.png) no-repeat ;} }

图像显示大两种尺寸，但当我的屏幕尺寸为320-768时，不显示任何图像。我已经确认该文件已存在，但我不知道为什么图片没有显示。

Answer 1

试试这个？

body{
   background: url(../images/background/background_320.png) no-repeat ;
}

@media only screen and (min-width : 768px) and (max-width : 1199px) {
   body{ background-image: url(../images/background/background_768.png);} 
}

@media only screen and (min-width : 1200px) {
   body{ background-image: url(../images/background/background_1200.png);} 
}

由于您只是要更改背景图片而不是no-repeat声明，我们可以将其从媒体查询中删除以获得更清晰的代码。

背景图像没有出现在移动页面上

1 个答案: