如何解决边界半径包装器中的绝对定位的图像
| 我有一个带有边框半径的包装纸。在包装内,我在右上角有一个绝对定位的图像。我的问题是图像没有在具有边框半径的包装器下裁剪/隐藏。我尝试了溢出:隐藏在包装器上,但不起作用。参见下图。解决方法
图像标签不受边界半径的影响。
最好的选择是将图片用作背景,例如:
<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愧),但也许对您有用。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。