Css 图像上的透明边框

我试图为我的图像创建一个透明的边框，并使用CSS将其放置在图像上

例如，请参见下图：

为了实现这一点，我尝试了以下代码，但我面临以下问题：

边框不在图像上方；它围绕图像，不允许图像100%适合父div

为了使边框透明，我使用了“不透明度”，但它也使图像透明，这是我不想要的

您可以在此处实时查看代码：

我可以创建一个div并使边框颜色透明，然后将其放置在图像上，但问题是图像的宽度是固定的（277px），但高度不是固定的。所以这对我不起作用

您能告诉我如何创建透明图像边框，并将其放置在图像上，就像上面的图像一样

HTML:

---

如果需要不透明度的边框，可以使用

RGBA

code。“A”表示α，因此您可以修改不透明度

border: 5px solid rgba(255,0,0, 0.3) ;

---

如果将图像和框放置在绝对、相对位置，则可以使用

z-index

将带边框的框放置在图像上方。

如何-它使用：after创建一个伪元素，将边框放置在图像上方，而不是图像外部

---

更新：如果保留右键单击图像的功能很重要，您可以使用一个额外的包装器来实现这一点：

正如多诺万所说，rgba用于边框颜色–但是包含图像的元素上的边框，然后“拉”出图像使用负边距和z指数在边界下方向外–如下所示

…
.灯箱{
显示：块；
宽度：267px；
边框：5px实心rgba（255255.75）；
}
.灯箱img{
显示：块；
宽度：277px；
保证金：-5px；
位置：相对位置；
z指数：-1；
}

我更新了你的小提琴

您需要做的是将图像设置为父div的背景，然后调整子div的宽度/高度以相应地拥抱图像

//make js fiddle work

---

对于仍在谷歌上搜索的用户：仅通过使用

outline

属性，就可以使用CSS实现此效果：

HTML

<img class="inset-border" src=".." alt="">

---

看一个例子：

@andi本质上是一样的，你得到了重点。可能是好的重复。很明显，这是需要使一个兄弟的形象，但我没有想到使用：后！只需使用

rgba

颜色而不是

红色

，效果很好。rgba颜色在功能上与此处使用不透明度相同，不是吗？此解决方案的缺点是图像上下文菜单（保存图像/复制图像/在新选项卡中打开）不再可访问。要保留右键单击图像的功能，你不需要额外的包装<代码>指针事件：无已足够。非常感谢您的回答：）

.imgWrap:after{
    content:"";
    position:absolute;
    top:0; bottom:0; left:0; right:0;
    opacity:0.5;
    border:5px solid red;
}

<div class="box" >  
    <span class="lightbox"><img …></span>
…
</div>

.lightbox{
   display:block;
   width:267px;
   border:5px solid rgba(255,255,255,.75);
}
.lightbox img{
    display:block;
    width:277px;
    margin:-5px;
    position:relative;
    z-index:-1;
}

//make js fiddle work

<img class="inset-border" src=".." alt="">

.inset-border {
  outline: 5px solid rgba(0,0,0,.5);
  outline-offset: -5px;
}