我是新手。我正在尝试设计一个原型(prototype)画廊和漫画导航页面，根据屏幕大小将 div 从列切换到行。我试图通过媒体查询来做到这一点。 div 似乎改变了一切，但我不知道为什么他们在此过程中丢失了背景图像。
无论我将其设计为列优先还是行优先，在媒体查询开始之前，与 CSS 相关的所有内容都按照我希望的方式工作。一旦我调整浏览器的大小以获得备用 View ，图像就会消失。如果有人能解释为什么会这样，和/或建议更好的路线，我将非常感激。
图片，因为我还没有实时站点:http://imgur.com/a/ebP3W
从桌面到移动网站的代码，如果有帮助的话。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Desktop to Mobile</title>
<style type="text/css">
body {
background-color: rgba(0,153,153,1);
}
body,td,th {
color: rgba(255,255,255,1);
}
#apDiv1 {
position: absolute;
left: 0%;
top: 0px;
width: 25%;
height: 100%;
z-index: 1;
background-image: url(_ImagesMain/1.jpg);
background-size: cover;
background-position: center;
}
#apDiv2 {
position: absolute;
left: 25%;
top: 0px;
width: 25%;
height: 100%;
z-index: 2;
background-image: url(_ImagesMain/2.jpg);
background-size: cover;
background-position: center;
}
#apDiv3 {
position: absolute;
left: 50%;
top: 0px;
width: 25%;
height: 100%;
z-index: 3;
background-image: url(_ImagesMain/3.jpg);
background-size: cover;
background-position: center;
}
#apDiv4 {
position: absolute;
left: 75%;
top: 0px;
width: 25%;
height: 100%;
z-index: 4;
background-image: url(_ImagesMain/4.jpg);
background-size: cover;
background-position: center;
}
#apDiv5 {
position: absolute;
left: 175%;
top: 0px;
width: 25%;
height: 100%;
z-index: 9;
background-image: url(_ImagesMain/4.jpg);
background-size: cover;
background-position: center;
}
#apDiv6 {
position: absolute;
left: 100%;
top: 0px;
width: 25%;
height: 100%;
z-index: 6;
background-image: url(_ImagesMain/1.jpg);
background-size: cover;
background-position: center;
}
#apDiv7 {
position: absolute;
left: 125%;
top: 0px;
width: 25%;
height: 100%;
z-index: 7;
background-image: url(_ImagesMain/2.jpg);
background-size: cover;
background-position: center;
}
#apDiv8 {
position: absolute;
left: 150%;
top: 0px;
width: 25%;
height: 100%;
z-index: 8;
background-image: url(_ImagesMain/3.jpg);
background-size: cover;
background-position: center;
}
</style>
<!-- Mobile -->
<link href="_CSS/Mobile_CSS.css" rel="stylesheet" type="text/css" media="only screen and (max-width:800px)">
</head>
<body>
<div id="apDiv1">Comics</div>
<div id="apDiv2">Gallery</div>
<div id="apDiv3">Forum</div>
<div id="apDiv4">Store</div>
<div id="apDiv5">Blog</div>
<div id="apDiv6">Patreon</div>
<div id="apDiv7">Commission</div>
<div id="apDiv8">Links</div>
</body>
</html>
Mobile_CSS.css 引用:
@charset "utf-8";
#apDiv1 {
position: absolute;
left: 0%;
top: 0%;
width: 100%;
height: 25%;
z-index: 1;
background-image: url(_ImagesMain/1.jpg);
background-size: cover;
}
#apDiv2 {
position: absolute;
left: 0%;
top: 25%;
width: 100%;
height: 25%;
z-index: 2;
background-image: url(_ImagesMain/2.jpg);
background-size: cover;
}
#apDiv3 {
position: absolute;
left: 0%;
top: 50%;
width: 100%;
height: 25%;
z-index: 3;
background-image: url(_ImagesMain/3.jpg);
background-size: cover;
}
#apDiv4 {
position: absolute;
left: 0%;
top: 75%;
width: 100%;
height: 25%;
z-index: 4;
background-image: url(_ImagesMain/4.jpg);
background-size: cover;
}
#apDiv5 {
position: absolute;
left: 0%;
top: 175%;
width: 100%;
height: 25%;
z-index: 9;
background-image: url(_ImagesMain/4.jpg);
background-size: cover;
}
#apDiv6 {
position: absolute;
left: 0%;
top: 100%;
width: 100%;
height: 25%;
z-index: 6;
background-image: url(_ImagesMain/1.jpg);
background-size: cover;
}
#apDiv7 {
position: absolute;
left: 0%;
top: 125%;
width: 100%;
height: 25%;
z-index: 7;
background-image: url(_ImagesMain/2.jpg);
background-size: cover;
}
#apDiv8 {
position: absolute;
left: 0%;
top: 150%;
width: 100%;
height: 25%;
z-index: 8;
background-image: url(_ImagesMain/3.jpg);
background-size: cover;
}
最佳答案
已修复!我所要做的就是禁用所引用的 Mobile_CSS.css 上的背景图像属性。
猜猜 html 或 css 不喜欢冗余？ idk。请随意发表评论，如果有人有解释，我将不胜感激。
关于html - 使用媒体查询将带有背景图像的 div 从列切换到行时遇到问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29727328/