邊界半徑與位置絕對圖像（不重疊）

我有一個內部和's。我的問題：外部div有border-radius和overflow：hidden。圖像比父母圖像寬。但溢出：隱藏效果很好，可以隱藏圖像的其餘部分。只有邊界半徑不適用於圖像。爲什麼？邊界半徑與位置絕對圖像（不重疊）

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

來源

2013-09-25 Issis

請給出類的確切名稱或創建一個jsfiddle。 – Mehmed

http://jsfiddle.net/7h4SD/ ;-) – Issis

看看這個工作解決

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

如果你想要的形象在那裏:)

其高度，但能見度變化

來源

2013-09-25 15:10:11 Anobik

酷！很好的解決方法。我通過標籤。 ;-) – Issis

邊界半徑與位置絕對圖像（不重疊）

回答

相關問題