边界半径包装器中的绝对定位的图像

问题描述

| 我有一个带有边框半径的包装纸。在包装内，我在右上角有一个绝对定位的图像。我的问题是图像没有在具有边框半径的包装器下裁剪/隐藏。我尝试了溢出：隐藏在包装器上，但不起作用。参见下图。     

解决方法

图像标签不受边界半径的影响。 最好的选择是将图片用作背景，例如：

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

元素（在上面的示例中为div）应包含实际图像的大小），除非您使用CSS3，否则无法像

<img>

标签那样调整图像的大小。     ,您可以为边框使用单独的绝对定位的

<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\">

当然是一个技巧（我觉得有点dirty愧），但也许对您有用。