根据div的背景颜色为图像边框着色

Question

上面是我在udacity找到的图像。我认为里面有一个png图像是bg-less，而且图像的边框的颜色与div背景的颜色相同。

我如何实现这一目标？

Answer 1

使图像的边框（黑色）不透明度达到50％（此处需要png），无论使用何种背景颜色，背景颜色都会闪耀。

如果图片已经完全透明，只有黑色边框，您可以使用CSS并将opacity: 0.5设置为这样的元素

img {
  opacity: 0.5;
}

div {
  background-image: url(...);
  opacity: 0.5;
}

Answer 2

您将创建一个PNG图像，其中插图的笔划具有50％的不透明度。这是一个示例图片：

这是带有彩色背景的相同图片：

＆＃13;

＆＃13;

div {
  display: inline-block;
  background-color: #00a573;
}

＆＃13;

<div>
<img src="http://i.stack.imgur.com/Il1Ur.png">
  </div>

＆＃13;

＆＃13;

＆＃13;