谁可以告诉他这的效果是怎么实现的

http://www.360buy.com/IT数码限时抢购
它的这个写有"抢"的图片是怎么置于内容之上的!

解决方案 »

  1.   

    photoshop?编程实现可能性不大吧………………
      

  2.   

    photoshop?编程实现可能性不大吧………………
      

  3.   

    这个是用js来写的，上面是个div
      

  4.   

    办法很多了，JS 根据商品图片位置绝对定位、CSS 使用 margin-left（这个可以为负值的，当然还要加一些CSS 属性配合）、把商品图片当背景图（虽然这个办法比较笨，但确实能做到）、还有前面的兄弟说过的直接 PS等等
      

  5.   

    怎么不能呢？position:absolute 样式的html element就可以相互层叠（前后覆盖）显示。实际上如果你把“抢”做成半透明的图片，然后在它的样式上也设置透明度，会更酷。
      

  6.   

    这个是纯css的效果，给你这个代码，复制到html文件中查看
    <html>
    <head>
        <style>
            html, body, div
            {
                margin: 0;
                padding: 0;
            }
            ol, ul
            {
                list-style: none outside none;
            }
            body
            {
                background: none repeat scroll 0 0 #FFFFFF;
                color: #333333;
                font-family: "宋体" ,Arial,Lucida,Verdana,Helvetica,sans-serif;
                font-size: 12px;
                line-height: 150%;
            }
            
            a:link, a:visited
            {
                color: #333333;
                text-decoration: none;
            }
            a:hover
            {
                color: #CC0000;
                text-decoration: underline;
            }
            a:active
            {
                color: #990000;
            }
            
            li
            {
                padding: 0 10px;
                text-align: center;
            }
            .p-img
            {
                height: 100px;
                margin: 3px 0;
                position: relative;
                width: 189px;
            }
            .p-et
            {
                display: none;
            }
            a img
            {
                border: 0px;
            }
            .pi9
            {
                background-image: url("http://misc.360buyimg.com/201007/skin/df/i/icon_promotion20110727.png");
                background-repeat: no-repeat;
                height: 60px;
                position: absolute;
                right: 0;
                top: 0;
                width: 54px;
            }
            .pi9
            {
                background-position: -162px 0;
            }
        </style>
    </head>
    <body>
        <div id="limit538">
            <ul>
                <li>
                    <div class="p-img">
                        <a target="_blank" href="http://www.360buy.com/product/521230.html">
                            <img width="100" height="100" src="http://img10.360buyimg.com/n4/674/3153ff70-767d-4ab8-9a46-25b2e4bf978a.jpg"></a><div
                                class="pi9">
                            </div>
                    </div>
                    <div class="p-name">
                        <a target="_blank" href="http://www.360buy.com/product/521230.html">Mizuno美津浓中性双肩背包Z89DF951-15000</a></div>
                    <div class="p-price">
                        抢购价：<strong>88.00</strong>(6.8折)</div>
                </li>
                <li>
                    <div class="p-img">
                        <a target="_blank" href="http://www.360buy.com/product/123140.html">
                            <img width="100" height="100" src="http://img10.360buyimg.com/n4/2260/830bdcf4-529c-48d1-b570-2576d6237de3.jpg"></a><div
                                class="pi9">
                            </div>
                    </div>
                    <div class="p-name">
                        <a target="_blank" href="http://www.360buy.com/product/123140.html">劲爆529元！价格爆破手！卡西欧(Casio)Edifice系列男士指针手表EF-503SG-7A</a></div>
                    <div class="p-price">
                        抢购价：<strong>529.00</strong>(8.8折)</div>
                </li>
            </ul>
        </div>
    </body>
    </html>
      

  7.   

    ycz815你太强了!
    谢谢,给你160分