4

我正在尝试使用边框框来创建在 3 列图像周围具有黑色 50% 透明度边框的效果。我已经读过，为了使边框向内移动以使用填充，但我无法让它工作。

这是我的 CSS 代码：

div.column-image {
box-sizing: border-box;
-moz-box-sizing: border-box;
border: 1em solid rgba(0, 0, 0, 0.5);
padding: 5px;
float: left;
}

这就是结果

http://i.imgur.com/9dopCX5.jpg?1

我想要的是边框向内，这将使图片透过边框。

这是一个例子：

http://i.imgur.com/ib6YUVZ.jpg

我尝试按照本教程中的示例进行操作：CSS Tricks: Transparent Borders with background-clip，但失败了。

请帮忙，我不知道该怎么办~

编辑：这是该网站的实时版本

4

2 回答 2

3

您愿意通过背景图像和框阴影解决方案来做到这一点吗？最好的做法是保持最小化并减少不必要的标记（在您的 CSS 和 HTML 中）。您只需要一个包含边框和图像的 div。

.transparent-bordered-image {
    background-image: url(http://your-url-here);
    background-size: cover;
    box-shadow: inset 0 0 0 30px rgba(0,0,0,0.5);
   -webkit-box-shadow: inset 0 0 0 30px rgba(0,0,0,0.5);
}

这是一个例子：http: //jsfiddle.net/fBY9z/1/

于 2013-11-16T02:52:53.507 回答
2

像这样？jsFiddle 示例

我通过放置在包装div元素上的伪元素添加了边框。

可悲的是，您不能在其img自身上使用 psuedo 元素，正如规范所述：

12.1 :before 和 :after 伪元素 （参考）

笔记。该规范没有完全定义 :before 和 :after 与替换元素的交互（例如 HTML 中的 IMG）。这将在未来的规范中更详细地定义。

HTML

<div id="imgwrap">
    <img/>
</div>

CSS

#imgwrap {
    position:relative;
    display:inline-block;
}
#imgwrap:after {
    content:"\A";
    border:20px solid rgba(10, 0, 255, 0.5);
    width:100%;
    height:100%;
    position:absolute;
    top:0px;
    left:0px;
    box-sizing: border-box;
    -wekbit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}
img { vertical-align:top; }
于 2013-11-16T02:33:23.520 回答