Question

我有一个内部和那个。我的问题：外部div得到了border-radius和overflow：hidden。图像比它的父母更宽。但溢出：隐藏可以很好地隐藏图像的其余部分。只有border-radius不在图像上。为什么呢？

我的HTML结构：

<div class="teaser-container tc1-sidebar">
<a href="#"> 
<img class="teaser-image bottom" src="dist/img/teaser/bigteaser-bonus-hover.jpg" alt="teaser"><img class="teaser-image top" src="dist/img/teaser/bigteaser-bonus.jpg" alt="teaser">
</a>
</div>

CSS for outer：

    position: relative;
    overflow: hidden;
   -webkit-border-radius: 10px;
   -moz-border-radius: 10px;
    border-radius: 10px;

内心的CSS：

position: absolute;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;

感谢您的解决方法！

看看我的问题：http://jsfiddle.net/7h4SD/

Answer 1

看看这是否适用于简单的工作

fiddle

CSS ---

    .box-s1 {
    width: 360px;
    height:360px;
    border: 1px solid #515355;
    margin: 10px 0px 10px 0px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 60px;
    background: url('http://weirdmovievillage.files.wordpress.com/2010/12/dexter-main-iamge1.jpg');
}

HTML

 <!-- 
* basic problem: image is wider than box. 
* round-corners don't grip 
-->

<div class="teaser-image-box box-s1 tib-ef1">

</div>

如果解决方法不适合您，请告诉我。基本上设置高度和宽度将等于图像的高度和宽度:)您还可以保持添加图像以检查其高度但更改可见性

display:none

如果您希望图像在那里：）

具有位置绝对图像的边界半径（无重叠）

1 个答案: