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>
我會更新它的HTML,但我已經完全搞砸了在這一點上...你可以在這裏查看它,如果查看源代碼會更容易? http://theshavebarber.com/about.php謝謝你花時間看看它,傑森!對此,我真的非常感激! – Meg1527