jquery怎么给div下的a标签添加背景图片？_IT百科

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

$(document).ready(function(e) {

$.each($("#PagingView a"),function(index,item){

switch($(item).text()){

case "First":

$(item).css({"color":"#ff0","background":"url(logo.png)"})

break

case "Next":

$(item).css({"color":"#f00","background":"url(logo.png)"})

break

case "Last":

$(item).css({"color":"#0f0","background":"url(logo.png)"})

break

}

})

</script>

</head>

<body>

<a href="javascript:" style="height:100pxwidth:100pxdisplay:block">First</a>

</div>

</body>

</html>

需要把图标换成字体图标,阿里巴巴图标库可以把图标转成字体图标，自定义的图标需要用svg然后转换。

下载出来引用字体图标样式。在样式表中引用字体图标

@font-face {

font-family: "aui_iconfont"

src: url('aui-iconfont.2.0.ttf') format('truetype')

}//字体引用方式

arrow-left:before { content: "\e6eb"}//字体图标的命名和生成的字体

把字体图标的命名引用到对应的div即可<div class="aui-iconfont aui-icon-left"></div>生成如下效果图。

可以使用背景图设置，使用背景精灵图把图标放在一张图片上面，通过定位位移来找到图片。

切成小图标一个位置对应一个图标。

这种使用添加背景图的方法来添加可变内容，还是很方便的，这种生成的可变内容，只需要调用一次图片，就能自动批量生成了，不是想图片导入那种，生成多少个就调用多少次，使用背景图导入会提高生成速度，比较快

欢迎分享，转载请注明来源：内存溢出

jquery怎么给div下的a标签添加背景图片？