属性: 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. java String拼接的方法选择及性能分析

    String 拼接的方法选择 在拼接静态字符串时,尽量用 +,因为通常编译器会对此做优化,如: String test = "this " + "is " + ...

  2. springBoot 实现中文国际化

    一:实现效果如下: 二 SpringBoot 国际化配置 1.创建国际化配置文件(3个): messages.properties messages.user.name=用户名 messages.us ...

  3. 键盘压缩背景,ios滚动不流畅,禁止遮罩层下面内容滚动

    1.<!--防止软键盘压缩页面背景图片--> <script> const bodyHeight = document.documentElement.clientHeight ...

  4. 基础篇:1)时代的发展与结构设计--3d与2d设计的变迁

    本章目的:机械设计需要追寻时代的脚步. 1.机械作图时代的划分 这张图是作者个人对机械作图发展的简单划分,并非哪个网站的数据.所以粗糙或错误请海涵. 2.2d作图时代 纯2d时代中,工程师开只绘制二维 ...

  5. CDQZ Day4

    NOIP 模拟题By liu_runda题目名称 数 论 题源程序文件名 number.cpp theory.cpp problem.cpp输入文件名 number.in theory.in prob ...

  6. Linux Mint下FireFox安装Adobe Flash Player

    最近在为自己的家里一台很老的机子(由于微软不再支持windows,windows10什么的不是这个老机子可以带的起来的233)选择一个合适的linux系统安装.看来看去,最终选择了排行很靠前,感觉也不 ...

  7. Weblogic反序列化远程命令执行漏洞(CNVD-C-2019-48814)测试

    漏洞简介 2018年4月18日,Oracle官方发布了4月份的安全补丁更新CPU(Critical Patch Update),更新中修复了一个高危的 WebLogic 反序列化漏洞CVE-2018- ...

  8. try-catch里面加了return后,finally还会执行吗?

    请看下面的方法,在我们的catch里面,捕获到了异常之后,我们的catch模块里面的语句,还会接着执行,当我们执行到return之后,我们不会立即返回,而是会接着执行finally块里面的代码,只有执 ...

  9. restsharp 组件调用返回 gbk 编码的api,中文乱码解决方法。(restsharp response 中文乱码 gbk)

    最近要调一个restful风格的api 用了 一个开源第三方组件,组件还是蛮好用的, 支持直接按参数定义实体类,然后发起请求之前直接 addobject 的方式就把请求参数给添加进去了, 解码的时候可 ...

  10. selenium中等待元素的加载

    在实际使用中,有时会出现一个元素还没有加载出来,导致无法获取,此时需要selenium处理来等待一段时间,此时处理方法有以下几种: 1.最笨.最简单但是最不推荐的方式: Thread.sleep(ti ...