：之前和之后：图像上的多边框/背景技巧？

我一直在使用：之前或之后：CSS技巧（在本文中解释：http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-multiple-borders-with-simple-css/）实现多个边框和背景。它在div元素上效果很好，但我注意到它根本不适用于图像。：之前和之后：图像上的多边框/背景技巧？

这里是我的代码：

.author img { 
    position: absolute; 
    left: 10px; 
    background-color: #fff; 
    padding: 3px; 
    border: 1px solid #d0d0d0; 
    width: 48px; 
} 

.author img:before { 
    content: ''; 
    display: block; 
    width: 80px; 
    height: 16px; 
    position: absolute; 
    top: -17px; left: 0; 
    background: red; 
}

有没有用这一招上的图像的方式或将我包裹我的图片附加DIV？

来源

2010-08-28 Justine

不确定，但尝试给图像'显示：块'以及 – 2010-08-28 11:11:13

不，没有改变任何东西。 – Justine 2010-08-28 17:15:04

这可以在DIV中正常工作，但IMG不会工作，因为它重叠了正在应用内部边框的区域。幸运的是，这有一个非常简单的解决方法：在DIV中包含IMG。

<div><img src="pic.jpg" alt="1" height="200" width="200" /></div>

并应用样式：

img {border: 2px solid red;} 
div {border: 3px solid black; width:204px; height:204px;}

虽然你不会需要明确设置IMG的高度/宽度在你的HTML，你还需要知道它们是什么，因为DIV高度/宽度计算像这样：div h = img h + img borderx2; div w = img w + img borderx2

来源

2010-08-28 18:49:07 Moses

您必须包装img，因为img不能包含伪元素。当:before和:after在CSS中使用，它是什么概念发电是这种类型的结构（比如，用div;注意，这只是为了说明正在做什么，都没有产生实际的HTML元素）：

<div><pseudo-element:before />Actual div content<pseudo-element:after /></div>

伪元素被放置在里面的元素是。但img标签（和input标签，以及其他没有结束标签的非容器）没有“内容”去处，包括伪元素生成的内容。

来源

2012-05-30 01:20:36 ScottS

：之前和之后：图像上的多边框/背景技巧？

回答

相关问题