我正在尝试为我的图像创建一个透明边框,并使用CSS将其放置在图像上.
例如,请看下图：
为了实现这一点,我尝试了以下代码,但是我面临以下问题：
>边框没有超过图像;它的图像周围,不允许图像适合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; }
解决方法
这是什么 – 它使用：在创建一个将边框放置在图像上方的伪元素之后,而不是外部.
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/
