css背景图像和img标签定位

时间:2014-02-05 08:30:50

标签: html css responsive-design

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

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

this is i want

像这样我有4列 保证金权利和宽度 - 我想给予他们和%。谁知道怎么说? 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;   }

1 个答案:

答案 0 :(得分:1)

该三角形应该是单独的图像,您可以将其与position:absolute;放在一起。这是因为你无法使用纯HTML来定义条件并使用Jquery或javascript来导致闪烁。