图像的多种背景颜色

Question

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

基本上为图像提供局部灰色背景，然后将其余部分保留为白色，以使图像的外观为＆＃34; float＆＃34;在灰色背景上，以及允许我做简单的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>中，并使用一个类来告诉它拥有它。但这就是我得到的。如果您需要它来做不同的事情，请告诉我。

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

将图像移动到左侧

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

随意改变并好好理解它

Answer 5

如果您使用遮罩（覆盖边缘的白色背景），则可以使用多种背景和背景颜色。 （感谢用户Dave Cripps获取我从他的演示中无耻地偷走的演示图像。）

＆＃13;

＆＃13;

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;

}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;