给元素添加背景图片

1 用行内元素-添加背景图片

<ul>    <li><span class="item1"></span>秋冬拗造型 .</li>    <li><span class="item2"></span>屡登女富豪榜首 </li>    <li><span class="item3"></span>英王室175年传家宝 </li>    <li><span class="item4"></span>k帅穿裙装变美 </li>    <li><span class="item5"></span>夏琳王妃美过1</li>    <li><span class="item6"></span>东京红毯吹出强劲</li>    <li><span class="item7"></span>一场“最诗艺</li></ul>

给span 加一个样式和背景图片

.box ul li span{        padding-right:20px;        background-image:url("images/demo2/bg.png");        background-repeat:no-repeat;    }    .box ul li span.item1{background-position:-10px 2px;}    .box ul li span.item2{background-position:-10px -28px;}    .box ul li span.item3{background-position:-10px -58px;}    .box ul li span.item4{background-position:-10px -88px;}    .box ul li span.item5{background-position:-10px -118px;}    .box ul li span.item6{background-position:-10px -148px;}    .box ul li span.item7{background-position:-10px -178px;}

这是改变li 的高度 span的高度不变
span的高度会随着 字体的大小而改变

2 用块级元素-添加背景图片

<ul class='list'>           <li class='item1'><a href="#" target="_blank">秋冬拗造型</a></li>    <li class='item2'><a href="#" target="_blank">屡登女富豪榜首</a></li>    <li class='item3'><a href="#" target="_blank">英王室175年传家宝</a></li>    <li class='item4'><a href="#" target="_blank">k帅穿裙装变美</a></li>    <li class='item5'><a href="#" target="_blank">夏琳王妃美过10年</a></li>    <li class='item6'><a href="#" target="_blank">东京红毯吹出强劲</a></li>    <li class='item7'><a href="#" target="_blank">一场“最诗</a></li></ul>

给li加一个样式和背景图片

li{     margin:14px 0px 0px 10px;      padding-left:25px;     background:url('images/demo2/bg.png') no-repeat -9px 2px;}li a{color:#000; text-decoration:none;}li.item2{background-position:-9px -28px;}li.item3{background-position:-9px -60px;}li.item4{background-position:-9px -90px;}li.item5{background-position:-9px -120px;}li.item6{background-position:-9px -150px;}li.item7{background-position:-9px -180px;}

这时候改变li的高度 引入的图片高度会增加