no-repeat的定位问题:
背景图片的位置,那两个数字是图片左上角到div(以div为例)左上角的偏移量。
第一个数字正数向左,负数向右;第二数字正数向下,负数向上。
首先将背景图的左上角与div的左上角重合,0 0表示不动,8px 0:表示将背景图向左移动8像素,-8px 0:表示将背景图向右移动8像素,0 8px:背景图向下移动8像素,0 -8px:背景图向上移动8像素;8px 8px:背景向左移动8像素再向下移动8像素;超出div的部分会隐藏不会显示出来。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.cart_btn {
width: 120px;
height: 30px;
background: url(img/pic.png) no-repeat -17px 7px #f7f7f7;
border: 1px solid #eee;
padding-left: 30px;
position: relative;
padding-top: 5px;
height: 25px;
}
.cart_btn span {
background: url(img/pic.png) no-repeat -36px -54px;
padding-left: 7px;
position: absolute;
top: -12px;
left: 20px;
}
.cart_btn span i {
float: left;
height: 20px;
background: url(img/pic.png) no-repeat right -25px;
padding-right: 5px;
font-style: normal;
color: #fff;
font-size: 14px;
}
.cart_btn a {
color: #aaa;
text-decoration: none;
font-size: 14px;
padding-left: 15px;
line-height: 30px;
}
.cart_btn b {
display: inline-block;
border-color: transparent transparent transparent #CCCCCC;
border-style: dashed dashed dashed solid;
border-width: 5px;
height: 0;
overflow: hidden;
width: 0;
}
</style>
</head>
<body>
<div class="cart_btn">
<span><i>100</i></span>
<a href="cart.html" target="_blank">去购物车结算</a>
<b></b>
</div>
</body>
</html>