css – 图像上的透明边框

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

例如,请看下图：

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

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

我可以创建一个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;
}

解决方法

这是什么 – 它使用：在创建一个将边框放置在图像上方的伪元素之后,而不是外部. 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/

css – 图像上的透明边框

解决方法

相关文章