html - 图像的多种背景颜色

Question

我想要实现的是显示具有透明背景层的图像，该图像将位于背景上，该背景将具有白色边框和位于图像区域中心的灰色框。

基本上是为图像提供部分灰色背景，然后将其余部分留白，使图像的外观“漂浮”在灰色背景上，并允许我进行简单的 css 更改以更改背景诗句必须重做图像才能改变外观。

这是我试过的css:

.borderlist img {
    text-align:center;
    vertical-align:middle;  
    background:
        linear-gradient
          (255,255,255, 0.9),
        url('../images/gray.png') no-repeat;
    max-width: 100%;
    height:auto;

}


And the html:

 <a href="http://www.domain.com/bounty.html"><span class="borderlist"><img src="images/bounty.png" alt="BOUNTY" title=" BOUNTY " width="225" height="155"></span><br>BOUNTY </a>

Answer 1

我删除了 <a> 中的下划线因为它在 <br> 上创建了一个奇怪的下划线.如果你想让文本加下划线，你可以把它放在 <span> 中。有一个告诉它拥有它的类。但这就是我得到的。如果您需要它来做一些不同的事情，请告诉我。

.overflowing-img {
  display: inline-block;
  text-align: center;
  text-decoration: none;
}
.undrline {
  text-decoration: underline;
}
.borderlist {
  text-align: center;
}
.borderlist img {
    text-align:center;
    vertical-align:middle;
  background-image: linear-gradient(rgba(160,160,160, 0.5), rgba(160,160,160, 0.5));
  background-repeat: no-repeat;
  background-size: 80% auto;
  background-position: center center;
}

<a href="http://www.domain.com/bounty.html" class="overflowing-img">
  <span class="borderlist">
    <img src="http://pngimg.com/upload/gift_PNG5950.png" alt="BOUNTY" title=" BOUNTY " width="225" height="155">
  </span>
  <br>
  <span class="undrline">BOUNTY<span>
</a>