请选择 进入手机版 | 继续访问电脑版
贠老师培训群:150322713    贠老师QQ:767708506

贠老师office培训-excel学习网

 找回密码
 立即注册
点击咨询贠老师
查看: 203|回复: 3

css背景图片的定位问题

[复制链接]

607

主题

604

帖子

1909

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
1909
发表于 2016-2-3 17:49:41 | 显示全部楼层 |阅读模式

我总觉得,CSS中背景图片的定位有些似是而非,这个问题困扰我很久了,今天总算搞懂了,一定要记下来,防止忘记。

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

1)关键字:background-position: top right;

2)像素:background-position: 0px 0px;

3)百分比:background-position: 0% 0%;

上面这三句语句,都将图片定位在背景的左上角,表面上看效果是一样的,实际上第三种定位机制与前两种完全不同。

前两种定位,都是将背景图片左上角的原点,放置在规定的位置。请看下面这张图,规定的位置是“20px 10px”和"60px 50px",都是图片的原点在那个位置上,图中用X表示。

css背景图片定位-像素定位

css背景图片定位-像素定位

但是第三种定位,也就是百分比定位,不是这样。它的放置规则是,图片本身(x%,y%)的那个点,与背景区域的(x%,y%)的那个点重合。比如,如果放置位置是“20% 10%”,实际结果如下图,可以看到这个点是在图片本身的“20% 10%”的位置上。

css背景图片定位-百分比定位

css背景图片定位-百分比定位

下面是一个有趣的例子。

背景图片是四个边长为100px的方块叠在一起:

css背景图片定位-背景竖排

css背景图片定位-背景竖排

请问怎样才能将其横过来:

css背景图片定位-背景横排

css背景图片定位-背景横排

答案是,在网页中先设置四个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% 33.33333%;
}
.box3 {
background-position:0% 66.66666%;
}
.box4 {
background-position:0% 100%;
}

点击这里查看最后的效果。可以看到第二和第三个方块的设置,并不是一般想象中的“0% 25%”和“0% 75%”。

不过说实话,这个例子用像素设置法更容易一些。使用百分比设置的主要优势在于,当页面缩放的时候,背景图片也会跟着一起缩放。


想要了解更多更全面的web前段知识,css样式,html教程,数据库教程,word教程,excel教程等等,就到excel学习网www.excelxue.com


回复

使用道具 举报

3

主题

1004

帖子

67

积分

注册会员

Rank: 2

积分
67
发表于 2016-4-2 15:04:40 | 显示全部楼层
大神啊!豁然开朗。。。。。。
回复 支持 反对

使用道具 举报

0

主题

775

帖子

783

积分

高级会员

Rank: 4

积分
783
发表于 2016-12-17 19:05:47 | 显示全部楼层
顶一个
回复 支持 反对

使用道具 举报

0

主题

735

帖子

57

积分

注册会员

Rank: 2

积分
57
发表于 2018-11-15 21:56:12 | 显示全部楼层
我是路过的,轻轻飘过
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则



陕ICP备15003731号  

贠老师培训 GMT+8, 2018-12-19 21:33 , Processed in 0.219320 second(s), 36 queries .

快速回复 返回顶部 返回列表