在图像的透明边框

Question

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

例如，请参见下图：

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

1. 边框不在图像上方;它在图像周围，不允许图像100％适合父div

2. 要使边框透明我使用了“不透明度”，但它使图像透明，我不想要。

您可以在此处查看代码：http://jsfiddle.net/6GK45/

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

请您告诉我如何创建透明图像边框并将其放在图像上，就像上图中一样。？

HTML：

<div class="box" >  
   <img class="lightbox" src="myimage.jpg" />
   This is text
</div>

CSS

.box {
    width:277px; 
    background:#FCFBDF;    
}

.lightbox {
    border: 5px solid red;
    z-index:999; 
    opacity:0.3; 
}

img {
    width:277px;
}

Answer 1

这是怎么回事 - 它使用：after创建一个伪元素，将边框放在图像的顶部，而不是在图像的外面。 http://jsfiddle.net/6GK45/8/

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

更新：如果保留右键单击图片的功能很重要，您可以使用其他包装器执行此操作：http://jsfiddle.net/6GK45/24/

Answer 2

正如Donovan所说，rgba为边框颜色 - 但是包含图像的元素上的边框，然后图像使用负边距和z-index在边界下“向外拉” - 像这样，{{3 }}

<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;
}

Answer 3

对于仍在谷歌上搜索的人：只有使用outline属性才可以通过CSS实现此效果：

HTML

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

CSS

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

请在此处查看示例：http://jsfiddle.net/9aqbe79f/

Answer 4

如果您想要一个不透明的边框，可以使用RGBA代码。 “A”表示alpha，因此您可以修改不透明度。

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

如果您将图片和方框放在相对位置的绝对位置，您可以使用z-index将图标放在图片上方。

Answer 5

我更新了你的小提琴。 http://jsfiddle.net/6GK45/21/

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

//make js fiddle work