css背景图定位
20%的功能满足80%的需求。爱、喜悦、和平。
html代码
<!DOCTYPE html> <html> <head> <title>css背景图定位</title> <meta http-equiv="content-type" content="utf-8"/> <style> div{34px;height:34px;border:solid 1px} #n1{background-image:url(bg_1.png);background-repeat:no-repeat;background-position:-35px -6px;} #n2{background-image:url(bg_1.png);background-repeat:no-repeat;background-position:34% 80%;} #n3{background-image:url(bg_1.png);background-repeat:no-repeat;background-position:center center;} </style> </head> <body> <div id="n1"> </div> <div id="n2"> </div> <div id="n3"> </div> </body> </html>
1、确定容器大小
<style> div{widht:34px;height:34px;} </style>
2、背景图片
(1)引用图片
background-image:url(bg_1.png);
(2)是否重复
background-repeat:no-repeat;
(3)定位
background-position:x y;