您的位置：首页 > 其它

background-position 实现背景定位 ie用属性background-position-x

2014-09-11 13:49 295 查看

实现背景图片的定位，如下图分别取各个银行的图标

HTML代码及CSS样式添加背景图

<html>
<style>
.logo-abc-ent, .logo-ccb-ent, .logo-icbc-ent, .logo-spdb-ent {
background: url("../logo/banks-combo-120111.png") ;
display: inline-block;
height: 36px;
width: 126px;
}
<style>
<body>
<!--
农业
-->
<label class="logo-abc-ent" for="bank-abc-ent" id="logo-abc-ent"></label>
<!--
工商
-->
<label class="logo-icbc-ent" for="bank-icbc-ent" id="logo-icbc-ent"></label>
<!--
建设
-->
<label class="logo-ccb-ent" for="bank-ccb-ent" id="logo-ccb-ent"></label>
<!--
浦发
-->
<label class="logo-spdb-ent" for="bank-spdb-ent" id="logo-spdb-ent"></label>
</body>
</html>

jquery实现不同浏览器下银行图标的定位

if($.browser.msie){//ie浏览器

//农行
$("#logo-abc-ent").css("background-position-y","0px");
//工商
$("#logo-ccb-ent").css("background-position-y","-109px");
//建行
$("#logo-icbc-ent").css("background-position-y","-433px");
//浦发
$("#logo-spdb-ent").css("background-position-y","-649px");

}else{//其他浏览器
//中信
$("#logo-citic").css("background-position","0px -217px");
//农行
$("#logo-abc-ent").css("background-position","0px 0px");
//工商
$("#logo-ccb-ent").css("background-position","0px -109px");
//建行
$("#logo-icbc-ent").css("background-position","0px -433px");
//浦发
$("#logo-spdb-ent").css("background-position","0px -649px");
}

<pre name="code" class="html"><span style="font-family: Arial, Helvetica, sans-serif;">background-position-x</span><span style="font-family: Arial, Helvetica, sans-serif;">和</span><span style="font-family: Arial, Helvetica, sans-serif;">background-position-y</span><span style="font-family: Arial, Helvetica, sans-serif;"> 只在ie浏览器下起作用，其他浏览器没有该属性</span>

同样background-position在其他浏览器下起作用但ie没有该属性

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航