我试图在幻灯片放映的图像上添加渐变渐变,这样,当观看某张图片时(我的幻灯片显示3张图片,一张中间版,然后是第一张& prev pic的一小部分),图片在两侧将有这个渐变,所以左边的前一张图片会让它的左侧渐渐消失,反之亦然.如果你找到我?类似于这里评论的内容:
How do you apply a fading overlay to an image in CSS?我有2个.png,一个向左淡化,一个向右淡化.我在哪里应用这些HTML和&的CSS?你会在.css的最底部看到它们,但它们没有正确应用,并且在html中没有相应的div(需要?).当你将鼠标悬停在下一个&在前的形象,他们也应该减轻一点(失去一些他们的褪色效果).示例:
http://www.deadmau5.com
HTML
<div class="hero"> <div class="hero-carousel"> <article> <img src="images/deadmau5/slide1.jpg" /> </article> <article> <img src="images/deadmau5/slide2.jpg" /> </article> <article> <img src="images/deadmau5/slide3.jpg" /> </article> <article> <img src="images/deadmau5/slide4.jpg" /> </article> </div> </div>
JavaScript的
<script> $(document).ready(function(){ $('.hero-carousel').heroCarousel({ easing: 'eaSEOutExpo',css3pieFix: true }); }); </script>
CSS
.hero { width: 1366px; height: 340px; position:absolute;top:270px; overflow: hidden; margin-bottom: 48px; margin: 0 auto; border-top:9px solid rgba(51,51,.15); border-bottom: 9px solid rgba(51,.15); padding: 0 0 12px 0; } .hero-carousel article { width: 970px; margin: 0 auto; height: 470px; display: block; float: left; position: relative; } .hero-carousel-container article { float: left; } .hero-carousel article img{ border-style:solid;border-width:6px;color:#000; position: absolute; top: 0; left: 0; z-index: 1; } .hero-carousel article .contents { position: relative; z-index: 2; top: 72px; left: 48px; list-style: none; color: #000; width: 556px; padding: 20px; background: rgba(255,255,0.8); -pie-background: rgba(255,0.8); -moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px; behavior: url(/assets/PIE.htc); } .hero-carousel-nav { width: 980px; position: absolute; bottom: 0; left: 50%; margin-left: -490px; z-index: 2; } .hero-carousel-nav li { position: absolute; bottom: 48px; right: 48px; list-style: none; } .hero-carousel-nav li.prev { left: -50px; right: auto; bottom: 100px; } .hero-carousel-nav li.next { right: -30px; left: auto; bottom: 100px; } .hero-carousel-nav li a { background: none repeat scroll 0 0 #D21034; color: #FFFFFF; display: block; float: left; } .hero-carousel-nav li.next a { background: url('../images/deadmau5/large-arrow-right.png'),-5px -7px no-repeat; display: inline-block; width: 105px; /*width of your img*/ height: 105px; /*height of your img*/ font-size: 0px; right: -15px; /*this is better than 1px*/ bottom: 100px; overflow:hidden; outline:none; } .hero-carousel-nav li.prev a { background: url('../images/deadmau5/large-arrow-left.png'),-7px -7px no-repeat; display: inline-block; width: 105px; /*width of your img*/ height: 105px; /*height of your img*/ font-size: 0px; /*this is better than 1px*/ left: -50px; bottom: 100px; overflow:hidden; outline:none; }
解决方法
有几种方法可以解决这个问题,但这是一个简单的例子,说明了这个网站如何铺设一切.
CSS
#container { position: relative; width: 504px; margin: 0 auto; } #slide-container { width: auto; } .article { display: inline-block; } .article img { width: 165px; height: auto; } #overlay-left { position: absolute; width: 165px; height: 60px; top: 0; left: 0; background: url('http://www.deadmau5.com/wp-content/themes/deadmau5/images/slider-fade-left.png') no-repeat top left; z-index: 2; } #overlay-right { position: absolute; width: 165px; height: 60px; top: 0; right: 0; background: url('http://www.deadmau5.com/wp-content/themes/deadmau5/images/slider-fade-right.png') no-repeat top right; z-index: 2; } #overlay-left:hover,#overlay-right:hover { opacity: 0.8; }
HTML
<div id="container"> <div id="slide-container"> <div class="article"> <a href=""> <img src="http://www.deadmau5.com/wp-content/uploads/2012/06/slide1.jpg" /> </a> </div> <div class="article"> <a href=""> <img src="http://www.deadmau5.com/wp-content/uploads/2012/06/slide1.jpg" /> </a> </div> <div class="article"> <a href=""> <img src="http://www.deadmau5.com/wp-content/uploads/2012/06/slide1.jpg" /> </a> </div> </div> <div id="overlay-left"></div> <div id="overlay-right"></div> </div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。