图像引导程序

Question

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

示例