2

我有一个内部和's。我的问题：外部 div 有边界半径和溢出：隐藏。图像比它的 parent 更宽。但是溢出：隐藏可以很好地隐藏图像的其余部分。只有边界半径不适用于图像。为什么？

我的 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：

    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/

4

1 回答 1

0

看看这是否可行

小提琴

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

如果您希望图像在那里:)

于 2013-09-25T15:10:11.080 回答