一、background-position属性

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

 <html>
 <head>
     <meta charset="utf-8">
     <title>灵活的背景定位</title>
     <style type="text/css">
     div{
         background:url(http://csssecrets.io/images/code-pirate.svg)
         no-repeat bottom right #58a;/*bottom right是指定的回退方案，避免放在左上角*/

         background-position: right 20px bottom 10px;

         max-width:10em;
         min-height: 5em;
         padding:10px;
         color:white;
         font:100% / 1 sans-serif;
     }
     </style>
 </head>
 <body>
     <div></div>
 </body>
 </html>

二、content-box

每个元素都存在3个矩形边框，border-box，padding-box，content-box，默认情况下，背景图片是从padding-box开始放置的。

如果增加一个属性值：

background-position: content-box，则背景图片将从content box的位置开始放置，通过这样的方式，也可以实现内边距的效果。

三、calc()函数

距离右边和下面各有20px的偏移量，其实就是距离上面和下面各有（100% - 20px）的偏移量；可以使用calc函数，注意在 +/- 前后需要各加一个空格。

background-position:  calc(100% - 20px), calc(100% - 20px);

[css]《css揭秘》学习（三）-灵活的背景定位的更多相关文章

  1. [css 揭秘]：CSS揭秘 技巧（三）：背景定位

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

  2. CSS小随笔（三）浮动与定位

    先来说一下CSS中的浮动 一.浮动 1.标准流中的块级盒子,宽度将自动伸展为100%,而浮动的块级盒子,宽度不会自动伸展,而是由内容撑开 2.当一个盒子浮动,标准流中未浮动的其他盒子,将视浮动盒子不存 ...

  3. html css的简单学习（三）

    html css的简单学习(三) 前端开发工具:Dreamweaver.Hbuilder.WebStorm.Sublime.PhpStorm...=========================== ...

  4. 原生 CSS 网格布局学习笔记

    下是来自Oliver Williams的帖子. Oliver已经学习了相当长时间的原生CSS网格,可以说是在CSS网格方面有一定的发言权.在这篇文章中,他将以非同寻常的思路分析自己的CSS网格布局学习 ...

  5. Web编程基础--HTML、CSS、JavaScript 学习之课程作业“仿360极速浏览器新标签页”

    Web编程基础--HTML.CSS.JavaScript 学习之课程作业"仿360极速浏览器新标签页" 背景: 作为一个中专网站建设出身,之前总是做静态的HTML+CSS+DIV没 ...

  6. 【CSS复合选择器、元素显示模式、背景】前端小抄(3) - Pink老师自学笔记

    [CSS复合选择器.元素显示模式.背景]前端小抄(3) 本学习笔记是个人对 Pink 老师课程的总结归纳,转载请注明出处! 一.CSS的复合选择器 1.1 什么是复合选择器 在 CSS 中,可以根据选 ...

  7. 对浏览器css兼容性的学习理解及问题解决汇总

    一.从浏览器内核的角度 来看,浏览器兼容性问题可分为以下三类: 1. 渲染相关:和样式相关的问题,即体现在布局效果上的问题. 2. 脚本相关:和脚本相关的问题,包括JavaScript和DOM.BOM ...

  8. css和css3学习

    css和css3学习 css布局理解 css颜色大全 样式的层叠和继承 css ::before和::after伪元素的用法 中文字体font-family常用列表 cursor属性 css选择器 F ...

  9. css的简单学习笔记

    1.CSS的简介 *css :层叠样式表 **层叠: 一层一层. **样式表: 具有大量的属性和属性值 *使得页面的显示效果更加好. *css将网页内容和显示样式进行分离,提高了显示功能. *css不 ...

随机推荐

  1. 串口通信中ReadFile和WriteFile的超时详解！

    源:串口通信中ReadFile和WriteFile的超时详解! 在用ReadFile和WriteFile读写串行口时,需要考虑超时问题.如果在指定的时间内没有读出或写入指定数量的字符,那么ReadFi ...

  2. 自动化运维 Ansible

    自动化运维 Ansible 特性 (1).no agents:不需要在被管控主机上安装任何客户端: (2).no server:无服务器端,使用时直接运行命令即可: (3).modules in an ...

  3. ngx_http_core_module模块提供的变量

    ngx_http_core_module模块在处理请求时,会有大量的变量,这些变量可以通过访问日志来记录下来,也可以用于其它nginx模块.在我们对请求做策略如改写等等都会使用到一些变量,顺便对ngx ...

  4. OPENCV基本滤波算法

    图像滤波的主要目的是为了在保留图像细节的情况下尽量的对图像的噪声进行消除,从而是后来的图像处理变得更加的方便. 图像的滤波效果要满足两个条件:1.不能损坏图像的轮廓和边缘这些重要的特征信息.2.图像的 ...

  5. iOS9新特性-3D Touch

    本文主要讲解3DTouch各种场景下的开发方法,开发主屏幕应用icon上的快捷选项标签(Home Screen Quick Actions),静态设置 UIApplicationShortcutIte ...

  6. 网络IO模型

    同步(synchronous) IO和异步(asynchronous) IO,阻塞(blocking) IO和非阻塞(non-blocking)IO分别是什么,到底有什么区别?这个问题其实不同的人给出 ...

  7. Bash中的变量

    Bash中的变量1.用户定义的变量变量的定义  用户定义的变量有字母数字及下划线组成,并且变量名的第一个字符不能为数字.            与其它UNIX名字一样,变量名是大小写敏感的. 对于变量 ...

  8. 【转】实用 .htaccess 用法大全

    这里收集的是各种实用的 .htaccess 代码片段,你能想到的用法几乎全在这里. 免责声明: 虽然将这些代码片段直接拷贝到你的 .htaccess 文件里,绝大多数情况下都是好用的,但也有极个别情况 ...

  9. 微信小程序问题2：未配置

    app.json 中未配置当前页面 pages/swipertest/swipertest 请检查后重试.console.error(`PAGE DEFINE ERRORapp.json 中未配置,当 ...

  10. PHPEXCEL实例-导出EXCEL

      PHPExcel 是相当强大的 MS Office Excel 文档生成类库,当需要输出比较复杂格式数据的时候,PHPExcel 是个不错的选择. <?php /* * 导出EXCEL *  ...