[英]Overflow hidden border over slider images
this is the slider i'm trying to modify: http://webkunst.comeze.com/ 这是我要修改的滑块: http : //webkunst.comeze.com/
And this is the overflow with border that I want to achieve: 这是我要实现的带有边界的溢出:
The problem is that I have tried everything to make the image work with the container overflow:hidden but it's not possible, I have tried with position relative, of all the container divs and so on. 问题是我已经尽一切努力使图像与容器溢出一起工作:隐藏,但我不可能尝试与所有容器div的位置相对,依此类推。
Can someone help me out? 有人可以帮我吗? The transparent border aren't a must but the most important thing is to get the overflow hidden work with the borders. 透明边框不是必须的,但最重要的是使边框具有溢出隐藏功能。
This is the markup: 这是标记:
<div id="home_slider">
<ul id="slides">
<li class="home_slide"><img src="images/slide1.jpg" alt=""></li>
<li class="home_slide"><img src="images/slide2.jpg" alt=""></li>
<li class="home_slide"><img src="images/slide3.jpg" alt=""></li>
<li class="home_slide"><img src="images/slide4.jpg" alt=""></li>
</ul>
</div>
and CSS: 和CSS:
#home_slider {
margin: 0 auto;
width: 880px;
height: 416px;
position: relative;
z-index: 5;
overflow: hidden;
}
#home_slider ul#slides {
list-style: none;
position: relative;
overflow: hidden;
border-radius: 20px;
}
#home_slider ul#slides li {
margin: 0;
width: 900px;
height: 416px;
}
.home_box {
margin-top: 30px;
float: right;
}
.home_box .home_image {
float: left;
border: 3px solid #6f6f6f;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
overflow: hidden;
margin-left: 13px;
}
I got the slider from this tutorial: http://line25.com/tutorials/build-a-simple-image-slideshow-with-jquery-cycle 我从本教程中获得了滑块: http : //line25.com/tutorials/build-a-simple-image-slideshow-with-jquery-cycle
You just need to apply the border-radius
to the #home_slider
div instead of #home_slider ul#slides
. 您只需要将border-radius
应用于#home_slider
div即可,而不是#home_slider ul#slides
。 For the transparent border, you can use rgba and you will need to apply it to #home_slider
as well: 对于透明边框,可以使用rgba,并且还需要将其应用于#home_slider
:
#home_slider {
margin: 0 auto;
width: 880px;
height: 416px;
position: relative;
z-index: 5;
overflow: hidden;
border-radius: 20px; /* add this */
border: 15px solid rgba(255, 255, 255, 0.5); /* add something like this for the transparent border */
}
EDIT : It seems Chrome cannot clip contents to a border-radius
when the elements are not position:static
. 编辑:当元素不在position:static
时,Chrome似乎无法将内容剪切到border-radius
。 However, if you can live without the transparent border then you can add this to the same rule above to get the rounded corners, but you must remove the border: 但是,如果您可以没有透明边框,那么可以将其添加到上面的同一规则中以获得圆角,但是必须删除边框:
-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.