仿唯品会 点击加背景图片

一共两种办法：

第一种：这种办法是一种很笨的办法，原因是我还是不熟悉很多属性，直接把背景图片放在img 的外层的 div 上。

  <span style="white-space:pre"></span><div class="brand-list">                            <a  href="javascript:;" class="brand-item">                            <div style="width:111px;height:46px">

<span style="white-space:pre"></span><img src="data/brandlogo/{$brand.brand_logo}" width="109px" height="44px" alt="">

<span style="white-space:pre"></span></div>                            </a>                         </div>

      css:

                                   

.brand-list {    overflow: hidden;    *zoom: 1;}.brand-list a div:hover{background:url( ../images/logobj.jpg) no-repeat;border: 2px;}.brand-list a  img{display:block; padding: 1px 0px 0px 1px;z-index:10;}

第二种办法是：

       

<span style="white-space:pre"></span><div class="brand-list">                            <a  href="javascript:;" class="brand-item"><img src="data/brandlogo/{$brand.brand_logo}" width="109px" height="44px" alt="">                            </a>                      </div>

  css 代码：

a.brand-item:hover {<span style="white-space:pre"></span>background-image: url(http://schoeu.qiniudn.com/qwe.jpg);<span style="white-space:pre"></span>background-repeat: no-repeat;<span style="white-space:pre"></span><span style="color:#ff0000;">background-size: 100% 60px;</span>}

知识点扩充：

    img 上添加背景图片

   1. 必须添加padding  值。

  2. dispaly :block;

    3. backgroud:url("  ")