背景图片与 CSS的那些事
在CSS中,背景图片的定位方法有3种:
1)关键字:background-position: top left;
2)像素:background-position: 0px 0px;
3)百分比:background-position: 0% 0%;
上面这三句语句,都将图片定位在背景的左上角,表面上看效果是一样的,实际上第三种定位机制与前两种完全不同。
前两种定位,都是将背景图片左上角的原点,放置在规定的位置。请看下面这张图,规定的位置是"20px 10px"和"60px 50px",都是图片的原点在那个位置上,图中用X表示。
但是第三种定位,也就是百分比定位,不是这样。它的放置规则是,图片本身(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% 33.33333%;
}.box3 {
background-position:0% 66.66666%;
}.box4 {
background-position:0% 100%;
}
点击这里查看最后的效果。可以看到第二和第三个方块的设置,并不是一般想象中的"0% 25%"和"0% 75%"。
不过说实话,这个例子用像素设置法更容易一些。使用百分比设置的主要优势在于,当页面缩放的时候,背景图片也会跟着一起缩放,具体请参考下面"延伸阅读"中的第二篇文章。
背景图片与 CSS的那些事的更多相关文章
- html css:背景图片链接css写法
图片作为背景,并且是链接的写法.例如网站的logo图片.例如:土豆的logo图片 <a title="土豆网 tudou.com 每个人都是生活的导演" href=" ...
- $设置背景图片的css
$('.d-game-pic').css('background-image', 'url(' + App.getImg(gameDetail.desc_pic) + ')');
- checkbox 背景图片 纯CSS处理办法
CSS .table_container input[type="checkbox"] { background: #fff url(/img/blue.png); backgro ...
- CSS背景图片垂直居中center不起效果完美解决
背景图片居中CSS如下 background:#4892fe url("<%=basePath%>/img/login_bg.jpg") no-repeat cente ...
- img只显示图片一部分 或 css设置背景图片只显示图片指定区域
17:14 2016/3/22img只显示图片一部分 或 css设置背景图片只显示图片指定区域 background-position: 100% 56%; 设置背景图片显示图片的哪个坐标区域,图片左 ...
- CSS常用背景图片定位方法
CSS背景图片定位其实对于每一位学习前端的同学来说,都已经非常熟悉了.网上铺天盖地的最常见的一种方案就是在父元素中relative,然后子元素absolute.这种方案当然好,不过带来的一个缺点就是会 ...
- CSS background-color 、image 背景图片
背景颜色 background-color 语法: background-color:<color> 默认值:transparent 透明 适用于:所有元素 继承性:无 动画性:是 计算 ...
- 用extract-text-webpack-plugin提取出来的css文件中背景图片url的不正确的问题
在一个main.js中require一个scss文件,scss文件中用了背景图片,图片url是用的相对路径,用extract-text-webpack-plugin插件提取出的css文件背景图片路径不 ...
- CSS hack前传——背景图片全屏
在之前的博客CSS hack中我有提到,一个问题的解决让我对CSS hack的态度从不屑一顾,到认真研究了实验一下,事情是这样的,最近产品发布,向来狂妄的我被一个bug纠缠住了,甚至丧气的表示我做不出 ...
随机推荐
- html5 (个人笔记)
妙味 html5 1.0 <!DOCTYPE html> <html> <head lang="en"> <meta charset=& ...
- wp8 json2csharp
string jsonData = "{\"result\":\"600\",\"data\":{\"items\&qu ...
- struts2文件下载,动态设置资源地址
转自:http://blog.csdn.net/ctrl_shift_del/article/details/6277340 ServletActionContext.getServletContex ...
- SQLite使用方法 SQLiteOpenHelper操作(转)
SQLiteOpenHelper主要用于 创建数据库 SQLiteDatabase 主要用于 执行sql语句 程序内使用SQLite数据库是通过SQLiteOpenHelper进行操作 1. ...
- Android ImageView图片自适应 (转)
网络上下载下来的图片自适应:android:adjustViewBounds="true"(其详细解释在下面)<ImageView android:id=" ...
- 百度之星复赛 1004 / hdu5715 二分dp+trie
XOR 游戏 Problem Description 众所周知,度度熊喜欢XOR运算[(XOR百科)](http://baike.baidu.com/view/674171.htm). 今天,它发 ...
- 虚拟机下运行linux通过nat模式与主机通信、与外网连接
首先:打开虚拟机的编辑菜单下的虚拟网络编辑器,选中VMnet8 NAT模式.通过NAT设置获取网关IP,通过DHCP获取可配置的IP区间.同时,将虚拟机的虚拟机菜单的设置选项中的网络适配器改为NAT模 ...
- achartengine 绘图表神器
http://code.google.com/p/achartengine/
- 循环日期的shell
date="2015-09-23"enddate='2015-11-08'while [[ $date < $enddate ]] do date=`date -d &quo ...
- 在Windows Server 2008中安装IIS
1.右键“我的电脑”,选择“管理”,打开“服务器管理器” 2.点击左边菜单栏“角色”调出角色窗口 3.接着点击“添加角色”,弹出添加“角色向导” 4.点击“下一步”进入服务器角色选项 5.勾选“Web ...