html - 图像 Bootstrap 上的徽章

Question

我必须像下面的示例图片一样在图像上放置徽章。我对 css 有不好的经验，所以如果有人能帮助我，我将不胜感激。

.product {
  margin: 0 30px 30px 0;
  width: 360px;
  position: relative;
  float: left;
}
.image-product {
  position: relative;
  width: 100%;
  height: 360px;
  overflow: hidden;
  border: solid;
  border-width: 1px;
}
.image-product > a,
.image-product img {
  display: block;
  width: 100%;
  height: 100%;
}

<div class="product clearfix">
  <div class="image-product">
    <a href="#">
      <img src="http://richthediabetic.com/wp-content/uploads/2013/07/Pizza.jpg" />
    </a>
  </div>
</div>

Answer 1

在图片上方添​​加徽章的 img 标签

<div class="product clearfix">    
    <div class="image-product">
        <a href="#">
            <img class="badgeOne" src="http://richthediabetic.com/wp-content/uploads/2013/07/Pizza.jpg" />
            <img src="http://richthediabetic.com/wp-content/uploads/2013/07/Pizza.jpg" />
        </a>
    </div>
</div>

像这样将 badgeOne 类添加到 css

.product {
  margin: 0 30px 30px 0;
  width: 360px;
  position: relative;
  float: left;
}
.image-product {
  position: relative;
  width: 100%;
  height: 360px;
  overflow: hidden;
  border: solid;
  border-width: 1px;
}
.image-product > a,
.image-product img {
  display: block;
  width: 100%;
  height: 100%;
}

.badgeOne {position: absolute;
    top: 10px;
    right: 10px;
    width: 20px !important;
    height: 20px !important;
    border: 1px solid;}

根据您的需要使用它...

这是一个示例 Fiddle