圖片是怎么定位的??？
為什么后面三個em里面我設置成background-repeat:no-repeat;background-position:0px 16px;背景圖不對，去掉background-repeat:no-repeat;就是對的。想知道圖片究竟是怎么定位的？我看了一下圖片大概是20px寬度，32px高度。
2 回答
舉報
0/150
提交
取消
為什么后面三個em里面我設置成background-repeat:no-repeat;background-position:0px 16px;背景圖不對，去掉background-repeat:no-repeat;就是對的。想知道圖片究竟是怎么定位的？我看了一下圖片大概是20px寬度，32px高度。
2016-10-13
舉報
2016-10-20
background-position默認位置是圖片的左上角和<em>邊框左上角對齊，如下圖：
當background-position:0 16px;圖片是相對默認位置向下移動了16px，如下圖：
所以當你去掉background-repeat:no-repeat后，圖片以左上角為原點在XY軸重復，那么圖片在Y軸向上的第一個重復圖片的位置剛好和background-position:0px -16px;的位置一樣，所以給你一種感覺對了的錯覺。。
正確方式應該是這樣：
.
.first
{
? ? ?background-image:url(http://img1.sycdn.imooc.com//53cf0fa20001d3dc00200032.jpg);
? ? ?background-repeat: no-repeat;
}
.second
{
? background-image:url(http://img1.sycdn.imooc.com//53cf0fa20001d3dc00200032.jpg);
? background-position:0 -16px ;
? background-repeat: no-repeat;
/*簡單寫法background: url(http://img1.sycdn.imooc.com//53cf0fa20001d3dc00200032.jpg) 0 -16px no-repeat;*/
?}
簡單來說就是background-position:Xpx YPx;就是圖片相對默認位置（圖片與其插入的標簽邊框左上角一致）在X軸和Y軸移動了Xpx和Ypx，X的值向左移動為負值，向右移動為正值；Y的值向上移動為負值，向下移動為正值；
2016-10-13
<!DOCTYPE?html?PUBLIC?"-//W3C//DTD?XHTML?1.0?Transitional//EN"?"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html?xmlns="http://www.w3.org/1999/xhtml"> <head> <meta?http-equiv="Content-Type"?content="text/html;?charset=gb2312"?/> <title>3.10新聞中心制作評測題</title> <style?type="text/css"> /*在此定義相關CSS樣式*/ *{margin:0;padding:0;font-size:12px;line-height:20px;font-family:"微軟雅黑";} .topList { ????width:300px; ????height:180px; ????border:1px?solid?#E8E8E8; ????margin:0?auto; } li { ????list-style-type:none; ????margin:10px; } a:link,a:visited { ????color:#000; ????text-decoration:none; } a:hover,a:active { ????color:#f00; ????text-decoration:none; } em { ????display:block; ????float:left; ????width:20px; ????height:16px; ????text-align:center; ????font-style:normal; ????color:#333; } .first { ????background-image:url(http://img1.sycdn.imooc.com//53cf0fa20001d3dc00200032.jpg); } .second { ??background-image:url(http://img1.sycdn.imooc.com//53cf0fa20001d3dc00200032.jpg); ??background-position:0px?16px; } </style> </head> <body> <div?class="topList"> <ul> <li?class="top"><em?class="first">01</em> <p><a?href="http://www.xianlaiwan.cn/"?>【慕客訪談用戶篇】“有為屌絲”在路上</a></p> </li> <li?class="top"><em?class="first">02</em> <p><a?href="http://www.xianlaiwan.cn/">【有獎活動】給父親的三行書信</a></p> </li> <li?class="top"><em?class="first">03</em> <p><a?href="http://www.xianlaiwan.cn/">《程序猿，請曬出你的童年》活動獲獎公告</a></p> </li> <li><em?class="second">04</em> <p><a?href="http://www.xianlaiwan.cn/">【慕課訪談】破繭成蝶——美女程序員的蛻變史</a></p> </li> <li><em?class="second">05</em> <p><a?href="http://www.xianlaiwan.cn/">【獲獎公告】追“球”巔峰，爭當“預言帝”</a></p> </li> <li><em?class="second">06</em> <p><a?href="http://www.xianlaiwan.cn/">【問卷調查】慕課網用戶學習情況大調查</a></p> </li> </ul> </div> </body>