0

我正在尝试为每种分辨率放入不同的图像。它适用于普通屏幕和智能手机，但我无法让它显示在大分辨率屏幕上。以下是相关的代码部分：

CSS：

/* Large screens ----------- */
@media only screen 
and (min-width : 1800px) {
html { 
  background: #000000 url(images/blackmagic.png) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

body { 
  background-color:transparent;
  font-size: 100%;
  color:#000000;
}

h1 {
  color:#000000;
  text-transform:uppercase;
  font-family: 'Sancreek', Impact, sans-serif;
  font-size:2.5em;
}

h2 {
  font-family: 'Pathway Gothic One', Verdana, sans-serif;
  font-size:1.875em;
  color:#000000;
}

a:link {
  color:#000000;
}

a:hover {
  color:#9b0505;
}

p {
  color:#000000;
  font-family: 'Monda', Verdana, sans-serif;
  font-size:0.875em;
  text-align:justify;
}

#container {
    position:relative;
    width: 2200px;
    margin: 0 auto;
    z-index: 0;
}

#social {
    position:relative;
    margin-left: 450px;
    z-index: 0;
}

#header {
    display:none;
    position:relative;
}

#headerm {
    display:none;
    position:relative;
}

#headerl {
    position:relative;
    z-index:1;
    margin-top:-500px;
    margin-left:200px;
    width: 100%;
}

HTML：

<div id="container" class="outer">
        <div id="border" class="outer">
        <div id="header" class="inner">
            <img src="/images/header.png" id="headerimage" />
        </div>
        <div id="headerl" class="inner">
            <img src="/images/headerlg.png" id="headerimage" />
        </div>
        <div id="headerm" class="inner">
            <img src="/images/headerm.jpg" id="headerimage" />
        </div>
4

2 回答 2

0

其实我只是想通了！

因为我隐藏了常规桌面/笔记本电脑分辨率的 DIV，并且没有在其媒体查询中定义该值的最大宽度，所以它也将其隐藏在大分辨率媒体查询中。

为标准分辨率定义最大宽度值的简单修复。

谢谢！:)

于 2013-10-22T01:03:29.130 回答
0

没有 HTML 吗？还发布一个快速小提琴将使调试更容易！

于 2013-10-21T08:04:34.247 回答