仿唯品会 点击加背景图片

一共两种办法：

第一种：这种办法是一种很笨的办法，原因是我还是不熟悉很多属性，直接把背景图片放在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("  ")