码迷,mamicode.com
首页 > Web开发 > 详细

css背景图定位

时间:2015-11-12 14:52:34      阅读:244      评论:0      收藏:0      [点我收藏+]

标签:

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移动容器。

点击下载

css背景图定位

标签:

原文地址:http://www.cnblogs.com/xyws/p/4958970.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!