在图像的透明边框

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

对于仍在谷歌搜索的人：仅通过使用以下属性就可以通过 CSS 实现此效果outline：

img {
  outline: 15px solid rgba(255, 0, 0, .75);
  outline-offset: -15px;
}

<img src="http://i.dailymail.co.uk/i/pix/2012/12/04/article-2242647-0F79C42300000578-201_634x429.jpg" width=250 />