html - CSS背景图片和img标签定位

我想这样
每个li的边框和背景色

如果有产品要约，则必须提供具有要约价值的图像
否则没有报价，不能显示三角形图像。

this is i want

这样我有4列
右边距和宽度-我想输入em和％。可以告诉别人吗？
HTML：

<li class="home-latest-cakes" id="product-42">
                <a href="http://localhost:8083/vignesh/works/cakes/?product=sample-2">
                                            <div class="product-bg">




                    <img width="124" height="238" alt="product-1" class="attachment-post-thumbnail wp-post-image" src="http://localhost:8083/vignesh/works/cakes/wp-content/uploads/2014/02/product-1.png">                                                </div>
                </a>
            </li>

CSS：

.home-latest-cakes {
   border: 1px solid #EEEEEE;
   color: #E4E4E4;
   float: left;
   height: 465px;
   margin-right: 1.6em;
       width: 200px;
}
.product-bg {
   background-color: #F8F9F4;
   height: auto;
   margin: 10px;
   text-align: center;
}
.offer {
   background: url("images/offer-bg.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
   float: right;
   font-family: Impact;
   font-size: 30px;
   height: 92px;
   min-width: 94px;
   z-index: 999;
}
.percent {
   color: #FFF000;
   float: right;
   font: 30px "Impact";
}
ins.off {
   background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
   color: #FFFFFF;
   font-family: "Bebas";
   font-size: 20px;
   left: 60px;
   position: relative;
   top: 31px;   }

最佳答案

该三角形应该是单独的图像，您可以使用position:absolute;放置它。这是因为您无法使用纯HTML定义条件，而使用Jquery或javascript会导致闪烁。

关于html - CSS背景图片和img标签定位，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/21572105/