16

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

例如，请看下图：

在此处输入图像描述

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

  1. 边框不在图像上方；它在图像周围，并且不允许图像 100% 适合父 div

  2. 为了使边框透明，我使用了“不透明度”，但它也使图像透明，这是我不想要的。

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

5 回答 5

23

这是怎么回事 - 它使用 :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/

于 2013-09-26T19:46:11.747 回答
5

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

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 />

于 2016-03-01T11:49:28.657 回答
4

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

<div class="box" >  
    <span class="lightbox"><img …&gt;</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;
}
于 2013-09-26T19:47:17.170 回答
2

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

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

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

于 2013-09-26T19:43:51.327 回答
0

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

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

//make js fiddle work
于 2013-09-26T19:51:09.537 回答