隱藏背景圖片，除非我縮小頁面寬度

全部。我試圖在三幅圖像旋轉幻燈片上添加一個帶有輕微不透明度的css矩形。我無法得到這個工作，所以我試圖創建矩形作爲一個透明背景的圖像，所以圖片會顯示，然後設置圖像作爲我的div的背景（它會在一些點上的水平導航）。這是一個醒目的頁面，所以幻燈片佔據了整個背景，並且我想讓黑色的條帶貫穿整個瀏覽器寬度。問題是隻有當我的瀏覽器窗口顯着縮小時纔會顯示矩形黑色條。隱藏背景圖片，除非我縮小頁面寬度

這裏是我的代碼看起來像現在：

<?php 
/* 
Template Name: Splash Page 
*/ 
?> 

<head> 
<script src="http://code.jquery.com/jquery-1.9.1.js"></script> 

<script type="text/javascript"> 

function slideSwitch() { 
var $active = $('#slideshow IMG.active'); 

if ($active.length == 0) $active = $('#slideshow IMG:last'); 

// use this to pull the images in the order they appear in the markup 
var $next = $active.next().length ? $active.next() 
    : $('#slideshow IMG:first'); 

// uncomment the 3 lines below to pull the images in random order 

// var $sibs = $active.siblings(); 
// var rndNum = Math.floor(Math.random() * $sibs.length); 
// var $next = $($sibs[ rndNum ]); 

$active.addClass('last-active'); 

$next.css({opacity: 0.0}) 
    .addClass('active') 
    .animate({opacity: 1.0}, 1000, function() { 
     $active.removeClass('active last-active'); 
    }); 
} 

$(function() { 
setInterval("slideSwitch()", 5000); 
}); 

</script> 

<style type="text/css"> 

#slideshow { 
position:fixed; 
z-index:0; 
} 

#slideshow IMG { 
position:fixed; 
top:0; 
left:0; 
z-index:auto; 
opacity:0.0; 
} 

#slideshow IMG.active { 
z-index:auto; 
opacity:1.0; 
} 

#slideshow IMG.last-active { 
z-index:auto; 
} 

#slideshow img { 
/* Set rules to fill background */ 
min-height: 100%; 
min-width: 1024px; 

/* Set up proportionate scaling */ 
width: 100%; 
height: auto; 

/* Set up positioning */ 
position: fixed; 
top: 0; 
left: 0; 
} 

@media screen and (max-width: 1024px){ 
img.bg { 
left: 50%; 
margin-left: -512px; 
} 

.enter { 
background: url('http://newmarketdvm.com/vsc/wp-content/themes/mono/images/splash- nav.png') repeat-x; 
left: 0; 
right: 0; 
top: 700px; 
position: absolute; 
z-index:5000; 
width: 1000px; 
height: 75px; 
display: block; 
} 

.enter p { 
font-weight:bold; 
font-size:30px; 
font-family: Helvetica; 
line-height:125%; 
z-index:auto; 
position: relative; 
float: left; 
} 



</style> 

</head> 

<body> 
<center> 
<div id="slideshow"> 
<img class="active" src="http://newmarketdvm.com/vsc/wp-content/uploads/2013/04/medical-team.jpg" alt="Slideshow Image 1" /> 
<img src="http://newmarketdvm.com/vsc/wp-content/uploads/2013/04/dog-running-grass.jpg" alt="Slideshow Image 2" /> 
<img src="http://newmarketdvm.com/vsc/wp-content/uploads/2013/04/Hans-treadmill-2.jpg" alt="Slideshow Image 3" /> 
</div> 
<div class="enter"><p>test text and navigation will be here</p></div> 
</center> 
</body>

來源

2013-05-27 Kaleigh

Duuuuude。逗號和句點，使用它們！ – SeinopSys

你還沒有關閉'media'查詢CSS大括號 – Vector

這樣做的原因是，你只爲元素設置樣式當瀏覽器窗口很窄。例如。只有當瀏覽器窗口小於1,024像素，因爲這樣會出現一段：

@media screen and (max-width: 1024px) 
    .enter p { 
    font-weight: bold; 
    font-size: 30px; 
    font-family: Helvetica; 
    line-height: 125%; 
    z-index: auto; 
    position: relative; 
    float: left; 
}

這可能是因爲你忘了關斷媒體查詢頁面高一點：

@media screen and (max-width: 1024px){ 
    img.bg { 
    left: 50%; 
    margin-left: -512px; 
}

這不是封閉的，所以遵循的所有規則都受它控制。

來源

2013-05-27 14:42:21

隱藏背景圖片，除非我縮小頁面寬度

回答

相關問題