例如,请看下图：

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

>边框没有超过图像;它的图像周围,不允许图像适合100％内部的父div
>要使边框透明,我使用“不透明度”,但它使图像透明也是我不想要的.

你可以在这里查看代码：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;
}