css背景图定位
20%的功能满足80%的需求。爱、喜悦、和平。
html代码
<!DOCTYPE html>
<html>
<head>
<title>css背景图定位</title>
<meta http-equiv="content-type" content="utf-8"/>
<style>
div{width: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;
x水平方向，y垂直方向。 默认向右向下为+。x、y为数值（px）时，移动图片；百分比（%）时，移动容器；center left right top bottom移动容器。
时间： 2024-08-29 18:19:18