• 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏吧

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

css 来源:Kaleigh 3次浏览

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


===========解决方案如下:

这样做的原因是,你只为元素设置样式当浏览器窗口很窄。例如。只有当浏览器窗口小于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; 
} 

这不是封闭的,所以遵循的所有规则都受它控制。


版权声明:本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系管理员进行删除。
喜欢 (0)