属性: background-position: left top || left bottom || right top || right bottom || center center || 像素值 || 百分比
实例:
代码:
 
1.设置background-position:left top 代表背景图片要放在内容区的左上角的位置(默认值)
2. 设置background-position: left; 将背景图片要放在内容区的左侧中间的位置 没有第二个参数则第二个参数默认为center
设置background-position: left bottom; 将背景图片要放在内容区的左下角的位置
3. 设置background-position: right; 将背景图片要放在内容区的右侧中间的位置,与left相同,没有第二个参数则第二个参数默认为center
4. 设置background-position: right top; 将背景图片要放在内容区的右侧上角的位置。
5. 设置background-position: right bottom; 将背景图片要放在内容区的右侧下角的位置。
6. 设置background-position: center; 将背景图片要放在内容区中间的位置。 与left, right相同,没有第二个参数则第二个参数默认为center
7. 设置background-position: 一个具体像素值(例如100px); 将背景图片要放在内容区水平位置100px的位置,即沿x轴平移100px;竖直方向默认为center即y轴居中的位置。
8. 设置background-position: 两个具体像素值(例如100px 100px); 将背景图片要放在内容区水平位置100px 垂直位置100px的位置,即沿x轴平移100px,沿y轴平移100px
9. 设置background-position: 一个百分比(例如20%); 将背景图片要放在内容区水平位置20%的位置。 0%是最左边 100%是最右边 中间平分。若只有一个值默认第二个参数为50%。
设置background-position:0%; 的效果(同left):
设置background-position:50%; 的效果(同center):
设置background-position:100%; 的效果(同right):
10. 设置background-position: 两个百分比(例如20% 20%); 将背景图片要放在内容区水平位置20%,竖直位置20% 的位置。 第一个参数:0%是最左边 100%是最右边 中间平分。第二个参数: 0%是最上边,100%是最下边 中间平分。
设置background-position:0% 100%; 的效果(同left bottom):
设置background-position:100% 100%; 的效果(同right bottom):

欢迎加入web前端冲击顶级高薪大厂学习群,群聊号码:820269529

css3之背景定位的更多相关文章

  1. CSS3之背景定位原点background-origin

    背景定位原点background-origin是CSS3新添加的有关背景的属性,主要是改变背景起始的原点位置的.CSS3之背景定位原点background-origin的属性值有三个:border.p ...

  2. [css 揭秘]:CSS揭秘 技巧(三):背景定位

    我的github地址:https://github.com/FannieGirl/ifannie 源码都在这上面哦! 喜欢的给我一个星吧 背景定位 问题:很多时候,我们想针对容器某个角对背景图片做便宜 ...

  3. css背景定位

    日期:2015-12-05 背景定位算是才弄明白: background-position:50% 50%; 图片水平和垂直居中.与 background-position:center center ...

  4. CSS3之背景剪裁Background-clip

    CSS3之背景剪裁Background-clip是CSS3中新添加的内容.这个属性还是比较简单的,主要分五个属性值:border.padding.content.no-clip和text.下面将针对这 ...

  5. [css]《css揭秘》学习(三)-灵活的背景定位

    一.background-position属性 使用该属性,在不确定容器大小的情况下,也可以指定图案距离容器边缘的位置:但是需要为不支持该属性的浏览器指定回退方案,否则,图案会默认放在左上角. < ...

  6. 基于CSS3动态背景登录框代码

    基于CSS3动态背景登录框代码.这是一款基于jQuery+CSS3实现的带有动画效果的动态背景登陆框特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class ...

  7. CSS3透明背景+渐变样式

    CSS3透明背景+渐变样式 转载自博文:<CSS3透明背景+渐变样式> http://blog.csdn.net/netbug_nb/article/details/44343809 效果 ...

  8. css3之背景属性之background-size

    一.相关属性: background-image: url(“./img/a.jpg”); //设置元素背景图片 background-repeat: repeat/no-repeat: //设置背景 ...

  9. 笔记《精通css》第4章 背景图像,平铺方式,背景定位,圆角框,投影,不透明

    第4章  背景图像,平铺方式,背景定位,圆角框,投影,不透明 1.背景图像 background-image:url() 2.平铺方式 background-repeat:repeat-x repea ...

随机推荐

  1. leetcode-475-Heaters

    题目描述: Winter is coming! Your first job during the contest is to design a standard heater with fixed ...

  2. HTML-常用标签与表格标签

    超链接标签: <a href="超链接地址" target="_blank">超链接的文字</a> _blank或new是在新网页中打开 ...

  3. Q678 有效的括号字符串

    给定一个只包含三种字符的字符串:(,) 和 *,写一个函数来检验这个字符串是否为有效字符串.有效字符串具有如下规则: 任何左括号 ( 必须有相应的右括号 ). 任何右括号 ) 必须有相应的左括号 ( ...

  4. Quartz .net 一直运行失败

    使用了新的: Quartz.NET 2.6.2 https://github.com/quartznet/quartznet/releases IScheduler scheduler = StdSc ...

  5. Python yield 的基本概念和用法

    之前解析MQTT协议时,需要做一个等分字节流的操作,其中用到了yield关键字,如下: def get_var_length(hstring): m = 1 v = 0 for element in ...

  6. jumserver 官方文档和

      一步一步安装(CentOS) 本文档旨在帮助用户了解各组件之间的关系, 生产环境部署建议参考 进阶安装文档 安装过程中遇到问题可参考 安装过程中常见的问题 测试推荐环境 CPU: 64位双核处理器 ...

  7. 移远EC20的使用

    一 发短信 3. 推荐短信流程3.1 查询 短信存储区AT+CPMS?+CPMS: "ME",19,255,"ME",19,255,"ME" ...

  8. (转)MySQL open_files_limit相关设置

    http://www.cnblogs.com/zhoujinyi/archive/2013/01/31/2883433.html---------------------------MySQL ope ...

  9. JUnit快速入门

    一.一个简单的Junit测试流程: 1.在项目中导入junit-4.7.jar包, 方法:右击项目,选择Build Path->Configure Build Path->Librarie ...

  10. Clojure编写一个阶乘程序 使用递归

    这是递归 (def f     (fn fb     [x]    (if (< x 2)      1      (* x (fb (- x 1)) )     )        )  ) ( ...