Question

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

Answer 1

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

@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;
}

没有关闭，所以后面的所有规则都由它控制。

除非我缩小页面宽度，否则隐藏背景图像

1 个答案: