这个 jquery slider 通常使用方形白框勾勒出轮廓,隐藏图像溢出。我需要将 slider 放在另一张图片之上,这样背景就不能是白色的。我创建了一个具有透明背景的新 .png 文件。但是如何隐藏图像溢出?
非常感谢;如果您仔细观察,您会看到旧的#rotatescroll .overlay 背景图片,我添加了第二张带有透明背景图片的#rotatescroll .overlay。
HTML
<div id="rotatescroll">
<div class="viewport">
<ul class="overview">
<li><a href="http://www.baijs.nl"><img src="https://raw.githubusercontent.com/wieringen/tinycircleslider/master/examples>/simple/images/hdr3.jpg" /></a>
</li>
<li><a href="http://www.baijs.nl"><img src="https://raw.githubusercontent.com/wieringen/tinycircleslider/master/examples/simple/images/hdr1.jpg" /></a>
</li>
<li><a href="http://www.baijs.nl"><img src="https://raw.githubusercontent.com/wieringen/tinycircleslider/master/examples/simple/images/hdr1.jpg" /></a>
</li>
<li><a href="http://www.baijs.nl"><img src="https://raw.githubusercontent.com/wieringen/tinycircleslider/master/examples/simple/images/hdr2.jpg" /></a>
</li>
<li><a href="http://www.baijs.nl"><img src="https://raw.githubusercontent.com/wieringen/tinycircleslider/master/examples/simple/images/hdr2.jpg" /></a>
</li>
</ul>
</div>
<div class="dot"></div>
<div class="overlay"></div>
<div class="thumb"></div>
</div>
CSS
img { border: 0; }
#rotatescroll { height:300px; position:relative; width:300px; }
#rotatescroll .viewport{ height:300px; position: relative; margin:0 auto; overflow:hidden; width:300px }
#rotatescroll .overview { position: absolute; width: 798px; list-style: none; margin: 0; padding: 0; left: 0; top: 0; }
#rotatescroll .overview li { height:300px; width:300px; float: left; position: relative; }
#rotatescroll .thumb { background:url('http://baijs.com/tinycircleslider/images/bg-thumb.png') no-repeat 50% 50%; position: absolute; top: -3px; cursor: pointer; left: 137px; width: 100px; z-index: 200; height: 100px; }
#rotatescroll .dot { background:url('http://baijs.com/tinycircleslider/images/bg-dot.png') no-repeat 0 0; display: none; height: 12px; width: 12px; position: absolute; left: 155px; top: 3px; z-index: 100; }
#rotatescroll .dot span { display: none; }
#rotatescroll .overlay {background:url('http://baijs.com/tinycircleslider/images/bg-rotatescroll.png') no-repeat 0 0; pointer-events: none; position: absolute; left: 0; top: 0; height:300px; width:300px; }
#rotatescroll .overlay {background:url('http://i.imgur.com/PtgjArP.png') no-repeat 0 0; pointer-events: none; position: absolute; left: 0; top: 0; height:300px; width:300px; }
.highlight, .indicator{background-color:#FC0;}
查询
$('#rotatescroll').tinycircleslider({
interval: true,
dotsSnap: true,
intervalTime: 1000
});
最佳答案
在这种特殊情况下,由于 View 是圆形的,我认为 #rotatescroll .viewport
上的 border-radius: 50%
是您要找的.稍微调整一下,您就可以去除轻微的轮廓。参见示例:http://jsfiddle.net/WKD32/
关于javascript - Jquery slider ;使容器透明,如何隐藏图像溢出?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24473106/