手机游戏
经典单机
角色扮演
休闲益智
动作冒险
射击枪战
赛车竞速
模拟经营
解密闯关
策略战争
手机软件
时尚购物
体育运动
资讯阅读
教育学习
摄影摄像
生活服务
效率办公
聊天社交
视频盒子
其它软件
新闻资讯
游戏攻略
软件教程
游戏问答
软件资讯
软件技术
叨叨念念
网站技术
技术问答
软件教程
资源资料
原创作品
代码学习
网页设计
网络技术
合集
合集
游戏合集
软件合集
资讯合集
视频合集
首页 > 网页设计 > 网页设计

CSS中背景图片的定位

作者:星知苑 时间:2010-08-19 12:42:38

在CSS中,背景图片的定位方位有3种:

(1)关键字:background-position: top right;
(2)像素:background-position: 0px 0px;
(3)百分比:background-position: 0% 0%;

前两种定位,都是将背景图片左上角的原点,放置在规定的位置。第一种就不介绍了。[break]
点击查看原图 


第二种:像素定位,css中经常用

假如要取图中5号红色方块,边长位100px,图片为test.png那么代码如下:

设置div区域:
<div class="test">
</div>
css编写:
.test {
float:left;
width:100px;
height:100px;
position:relative;
background: #F3F2E2 url(test.png) no-repeat;
background-position: -200px -200px;
}
这样就可以取到5那个方块了

第三种:它的放置规则是,图片本身(x%,y%)的那个点,与背景区域的(x%,y%)的那个点重合。比如,如果放置位置是“20% 10%”,这个点是在图片本身的“20% 10%”的位置上。适合页面缩放的网页中

事例:
点击查看原图
背景图片是四个边长为100px的方块叠在一起
加载到网页后,变成下图样子
点击查看原图

在网页中先设置四个div区域:
<div class="box1">
</div>
<div class="box2"">
</div>
<div class="box3">
</div>
<div class="box4">
</div>


css编写:
像素方法:
.box1, .box2, .box3, .box4 {
float:left;
width:100px;
height:100px;
position:relative;
background: #F3F2E2 url(1234.png) no-repeat;
}

.box1 {
background-position:0 0;
}

.box2 {
background-position:0 -100px;
}

.box3 {
background-position:0 -200px;
}

.box4 {
background-position:0 -300px;
}

百分比方法:
.box1, .box2, .box3, .box4 {
float:left;
width:100px;
height:100px;
position:relative;
background: #F3F2E2 url(1234.png) no-repeat;
}

.box1 {
background-position:0% 0%;
}

.box2 {
background-position:0% 33.33333%;
}

.box3 {
background-position:0% 66.66666%;
}

.box4 {
background-position:0% 100%;
}

良心推荐

最火的音乐节奏游戏
  • 点点节奏官方下载
  • 点点节奏破解版
  • 律动节奏游戏下载
  • 音乐大师游戏下载手机版
  • 永不言弃2破解版
  • 钢琴块2019最新版
在手机上享受音乐是一件非常舒心的事情,现在随着不断的游戏发展,很多的音乐加入到游戏之中成为了现在年轻人的娱乐轻松休闲能够体验到那种指尖带来的多种不同的节奏的欢乐,非常的好玩这里小编也是整理很多的相关的游戏免费的提供下载,也是目前很受欢迎的比较火爆的音乐类的节奏游戏快来感受指尖的快乐吧。

相关资讯