隐藏背景图片，除非我缩小页面宽度

全部。我试图在三幅图像旋转幻灯片上添加一个带有轻微不透明度的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

隐藏背景图片，除非我缩小页面宽度

回答

相关问题