图像上的透明边框答案

【问题标题】：Transparent border over image图像上的透明边框
【发布时间】：2013-10-02 22:43:06
【问题描述】：

我正在尝试为我的图像创建一个透明边框，并使用 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;
}

【问题讨论】：

@andi 本质上是一样的，你明白了。
How to make a transparent border using CSS?的可能重复

标签： css

【解决方案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/

【讨论】：

好一个。显然需要为图像创建兄弟，但我没有想到使用 :after !
只需要一个rgba 颜色而不是red 就可以了。
一个 rgba 颜色在功能上与在这里使用不透明度相同，不是吗？
此解决方案的缺点是无法再访问图像上下文菜单（保存图像/复制图像/在新选项卡中打开）。
为了保留右键单击图像的能力，您不需要额外的包装器； pointer-events: none; 就足够了。 developer.mozilla.org/en-US/docs/Web/CSS/pointer-events

【解决方案2】：

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

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

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

【讨论】：

【解决方案3】：

正如多诺万所说，rgba 表示边框颜色——但包含图像的元素上的边框，然后使用负边距和 z-index 将图像“拉”到边框下方——就像这样，http://jsfiddle.net/6GK45/7/

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

【讨论】：

非常感谢您的回答:)

【解决方案4】：

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

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

如果您将图像和框置于绝对、相对位置，您可以使用z-index 将带有边框的框放在图像上方。

【讨论】：

【解决方案5】：

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

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

//make js fiddle work

【讨论】：