在css中添加带透明背景的图像边框

Question

我正在将PSD转换为HTML并遇到边框问题。有没有办法为透明背景的图像添加边框？比方说，我有这个图像。

所以图像上有一个插入符号，我想做这样的事情。（见下文）：

如何在图像中制作白色边框？

Answer 1

您可以使用透明背景的png图像。

http://jsfiddle.net/BWxfv/

#caret {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
}

Answer 2

这是一种使用额外（不幸的必需）元素和一堆伪元素的方法。

我使用了不同的颜色，所以你可以看到两个'插入符号。

Codepen Demo

<强> HTML

<div class="wrapper">
  <img src="http://lorempixel.com/output/nightlife-q-c-500-200-9.jpg" alt="" />
  <div class="main">
    <div class="caret-border"></div> <!---extra div -->
  </div>
</div>

<强> CSS

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background: lightgrey;
}

.wrapper {
  width:650px;
  margin: 10px auto;
  border:1px solid grey;
}

.wrapper img {
  display: block;
  width:100%;
  height:auto;
}

.main {
  position: relative;
  min-height:150px;
  background: #bada55;
}
.main:before,
.main:after {
  position: absolute;
  content:"";
  height:0;
  width:calc(50% - 16px);
  height:0px;
  transform:translateY(-100%);
  //top:-16px;
  z-index:2;
  border-style:solid;

}

.main:before {
  left:0;
  border-width: 0px 16px 16px 0;
  border-color:transparent transparent green transparent;
}

.main:after {
  right:0;
  border-width: 0px 0px 16px 16px;
  border-color:transparent transparent green transparent;
}

.caret-border {
  height:0px;
  background: red;
  position: absolute;
  width:100%;

}

.caret-border:before,
.caret-border:after{
  position: absolute;
  content:"";
  height:0px;
  top:0;
  width:calc(50% - 14px);
  z-index:1;
  border-style:solid;
  transform:translateY(-100%);
  //top:-18px;
}

.caret-border:before {
  left:0;
  border-width: 0px 16px 18px 0;
  border-color:transparent transparent white transparent;
}

.caret-border:after{
  right:0;
  border-width: 0px 0px 18px 16px;
  border-color:transparent transparent white transparent;
}