邊框半徑包裝中的絕對定位圖像

我有一個邊框半徑的包裝。在包裝內我有一個絕對定位的圖像在右上角。我的問題是，該圖像不會裁剪/隱藏在邊界半徑的包裝下。我試過溢出：隱藏在包裝上，但它不起作用。見下圖。邊框半徑包裝中的絕對定位圖像

enter image description here

2011-05-26 Johan Wallberg

圖片標籤不受邊界半徑。

最好的辦法是使用的圖片像背景：

<div id="someimage" style="background:url('image.jpg');border-radius: 5px; height: 200px; width: 500px;"></div>

元素（在上面的例子中一個div）應包含實際圖像的大小），除非你使用CSS3中，圖像無法調整大小，如<img>標記

來源

2011-05-26 09:05:51 Starx

這很可能是問題，但實際上它依賴於瀏覽器：有些瀏覽器會裁剪前景圖像，有些則不會。 – Spudley 2011-05-26 09:53:44

@Spudley：我認爲問題在於彎曲的邊框衝擊內容框的內部，而非彎曲的邊框完全停留在內容框的外部，因此不會出現這種問題。即使邊框沒有，內容框（並因此剪裁）仍然是矩形。這是有道理的，還是我的思維被疲勞困惑？ – 2011-05-26 10:06:31

@mu太短，我不知道斯普德利，但我很困惑。：P – Starx 2011-05-26 13:43:38

您可以爲邊框使用單獨的絕對定位<div>，以便您可以將邊框放置在絕對定位的圖像上方。例如：

<div id="wrapper"> 
    <div id="inner"> 
     <img id="i" width="75" height="75" src="http://placekitten.com/75/75"> 
    </div> 
    <div id="border"></div> 
</div>

而一些CSS（WebKit的邊界半徑僅性質，其餘的都留給作爲練習讀者）：

#wrapper { 
    position: relative; 
} 

#inner { 
    margin: 2px; /* Make room for the border */ 
    width: 200px; 
    height: 200px; 
    position: relative; 
} 

#border { 
    -webkit-border-radius: 5px; 
    border: 2px solid black; 
    width: 200px; 
    height: 200px; 
    position: absolute; 
    top: 0; 
    left: 0; 
} 

#i { 
    position: absolute; 
    top: 0; 
    right: 0; 
}

和平常例如：http://jsfiddle.net/ambiguous/6e622/

的<div id="border">肯定是一個黑客（我覺得有點骯髒，但它可能會爲你工作）。

來源

2011-05-26 09:51:27

邊框半徑包裝中的絕對定位圖像

回答

相關問題