图像的多种背景颜色

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>

Answer 2

我使用了不同的图像，但这是您想要实现的目标吗？

.borderlist img {
  width: 200;
  height: 100;
}

.borderlist {
  width: 225px;
  height: 125px;
  text-align: center;
  vertical-align: middle;
  background: linear-gradient(to bottom, #c8c8c8, #ffffff);
  margin: auto;
}

.whiteBorder {
  width: 255px;
  height: 155px;
  background-color: #ffffff;
  text-align: center;
}

<div class="whiteBorder">
  <div class="borderlist">
  <a href="http://www.domain.com/bounty.html">
    <img src="http://en.wikipedia.org/static/images/project-logos/enwiki.png" alt="BOUNTY" title="BOUNTY">
    <br>BOUNTY</a>
  </div>
</div>

Answer 3

尝试在您的 css 中使用 :before 将图像覆盖在 div 的顶部。

div{
  width: 200px; height: 200px;
  background-color: lightgray;
  box-sizing: border-box;
  border: 20px solid white;
  position: relative;
}
div:before{
  content: "";
  display: block;
  margin: -20px;
  width: 200px;
  height: 200px;
  background-image: url('https://i.stack.imgur.com/eLzG5.png');
  background-size: contain;
  background-repeat: no-repeat;
}

<div></div>

Answer 4

让我们先来非常简单：

您不能通过更改 css 将图像向左移动

.borderlist { 
    background: grey;
    border: 60px solid white;
    box-sizing: border-box;
    width: 260px;
}

<div class="borderlist">
<img src="https://s9.postimg.org/d0odjmlcv/dwa.png" height="100px" width="150px" />
</div>

你也可以这样做，创建一个容器 div，在里面，创建灰色 div，然后将图像浮动到灰色 div 上方，像这样（我认为这是最好的）：

.borderlist {
    padding: 5%;
    background: white;
    width: 160px;
    height: 120px;
    position: relative;
}
.grey {
  position: absolute;
  background: grey;
  width: 130px;
  height: 90px;  
  margin: 10px;
}

.float {
  position: absolute;
}

<div class="borderlist">
<div class="grey">
</div>
<img class="float" src="https://s9.postimg.org/d0odjmlcv/dwa.png" height="100px" width="150px" />
</div>

随意更改和玩耍以正确理解它

Answer 5

如果您可以使用遮罩（覆盖边缘的白色背景），您可以使用多个背景加上背景颜色。 （感谢用户 Dave Cripps 的演示图像，我无耻地从他的演示中窃取了我的演示图像。）

a {
  text-align:center;
  display:inline-block;
}

.borderlist {
  display:inline-block;
  text-align:center;
  vertical-align:middle;  
  background:
    linear-gradient(to right, white 15%, transparent 15%, transparent 85%, white 85%), linear-gradient(to bottom, white 15%, transparent 15%, transparent 85%, white 85%);
  background-color: #eee;
  transition: background-color 0.4s;

}

a:hover .borderlist {
  background-color: #5C5;
}

.borderlist img {
  height:auto;

}

<a href="http://www.domain.com/bounty.html"><span class="borderlist"><img src="http://en.wikipedia.org/static/images/project-logos/enwiki.png " alt="BOUNTY" title=" BOUNTY " width="225" height="155"></span><br>BOUNTY </a>