0

全部。我正在尝试在三图像旋转幻灯片上添加一个略微不透明的 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>
4

1 回答 1

2

这样做的原因是您只在浏览器窗口很窄时才为元素设置样式。例如，该段落仅在浏览器窗口小于 1024 像素时出现，因为：

@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-27T14:42:21.797 回答