透明边框覆盖在图片上

Question

透明边框覆盖在图片上

css

16

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

例如，请参见下面的图片：

enter image description here

为了实现这一点，我尝试了以下代码，但是遇到了以下问题：

边框不在图像上方；它围绕着图像并且不允许图像完全适应父 div 内
为使边框透明，我使用了“opacity”，但它也使图像透明，这不是我想要的。

您可以在此处查看实时代码：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;
}

- black_belt

3

@andi基本上是同样的意思，你明白了。 - Josh Crozier

可能是如何使用CSS制作透明边框？的重复问题。 - Mr. Alien

5个回答

7

如果还有人在谷歌上搜索这个问题：使用 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 />

- Moritz Friedrich

4

如Donovan所说，border-color可以使用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;
}

- CBroe

2

如果你想要一个具有透明度的边框，可以使用 RGBA 代码。其中的 'A' 表示透明度，因此你可以修改透明度。

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

您可以使用z-index属性，如果您将图像和框放在绝对或相对定位中，就可以将带边框的框置于图像上方。

- Donovan Charpin

0

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

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

//make js fiddle work

- Crackertastic

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- andi · Accepted Answer

这是怎样实现的 - 它使用 :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/