[css]《css揭秘》学习（三）-灵活的背景定位
一、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揭秘》学习（三）-灵活的背景定位的更多相关文章
- [css 揭秘]：CSS揭秘 技巧（三）：背景定位
我的github地址:https://github.com/FannieGirl/ifannie 源码都在这上面哦! 喜欢的给我一个星吧 背景定位 问题:很多时候,我们想针对容器某个角对背景图片做便宜 ...
- CSS小随笔（三）浮动与定位
先来说一下CSS中的浮动 一.浮动 1.标准流中的块级盒子,宽度将自动伸展为100%,而浮动的块级盒子,宽度不会自动伸展,而是由内容撑开 2.当一个盒子浮动,标准流中未浮动的其他盒子,将视浮动盒子不存 ...
- html css的简单学习（三）
html css的简单学习(三) 前端开发工具:Dreamweaver.Hbuilder.WebStorm.Sublime.PhpStorm...=========================== ...
- 原生 CSS 网格布局学习笔记
下是来自Oliver Williams的帖子. Oliver已经学习了相当长时间的原生CSS网格,可以说是在CSS网格方面有一定的发言权.在这篇文章中,他将以非同寻常的思路分析自己的CSS网格布局学习 ...
- Web编程基础--HTML、CSS、JavaScript 学习之课程作业“仿360极速浏览器新标签页”
Web编程基础--HTML.CSS.JavaScript 学习之课程作业"仿360极速浏览器新标签页" 背景: 作为一个中专网站建设出身,之前总是做静态的HTML+CSS+DIV没 ...
- 【CSS复合选择器、元素显示模式、背景】前端小抄(3) - Pink老师自学笔记
[CSS复合选择器.元素显示模式.背景]前端小抄(3) 本学习笔记是个人对 Pink 老师课程的总结归纳,转载请注明出处! 一.CSS的复合选择器 1.1 什么是复合选择器 在 CSS 中,可以根据选 ...
- 对浏览器css兼容性的学习理解及问题解决汇总
一.从浏览器内核的角度 来看,浏览器兼容性问题可分为以下三类: 1. 渲染相关:和样式相关的问题,即体现在布局效果上的问题. 2. 脚本相关:和脚本相关的问题,包括JavaScript和DOM.BOM ...
- css和css3学习
css和css3学习 css布局理解 css颜色大全 样式的层叠和继承 css ::before和::after伪元素的用法 中文字体font-family常用列表 cursor属性 css选择器 F ...
- css的简单学习笔记
1.CSS的简介 *css :层叠样式表 **层叠: 一层一层. **样式表: 具有大量的属性和属性值 *使得页面的显示效果更加好. *css将网页内容和显示样式进行分离,提高了显示功能. *css不 ...
随机推荐
- 说说Android应用的persistent属性
转载地址:http://my.oschina.net/youranhongcha/blog 摘要 在Android系统中,有一种永久性应用.它们对应的AndroidManifest.xml文件里,会将 ...
- angularJS 系列（一）
angularJS 中 $scope 的原型 和 原型继承之间的细微差别是什么? 参考:http://stackoverflow.com/questions/14049480/what-are-the ...
- ZOJ 3780 Paint the Grid Again
拓扑排序.2014浙江省赛题. 先看行: 如果这行没有黑色,那么这个行操作肯定不操作. 如果这行全是黑色,那么看每一列,如果列上有白色,那么这一列连一条边到这一行,代表这一列画完才画那一行 如果不全是 ...
- Android 编译错误
本人使用的是Android studio1.3版本,前几天调试通过的项目,现在编译出现了错误.错误信息如下 Project app: apk dependencies can only be jars ...
- iOS纯代码工程手动快速适配
首先说下让自己的程序支持iPhone6和6+,第一种使用官方提供的launch screen.xib,这个直接看官方文档即可,这里不再多述:第二种方法是和之前iPhone5的类似,比较简单,为iPho ...
- HUST 1605 Gene recombination
简单广搜.4进制对应的10进制数来表示这些状态,总共只有(4^12)种状态. #include<cstdio> #include<cstring> #include<cm ...
- LPC2478的SPI使用
LPC2478的spi使用 LPC2748具有一个SPI控制器,可以当做SPI主机或者从机使用,有以下特性 其使用起来很方便,并且支持中断,使用的寄存器如下 基本上,使用起来就是设置控制为,CPOL ...
- STM32驱动TEA5767收音机模块
Tea5767是飞利浦公司出的一款集成化的收音机芯片,大四的时候机缘巧合遇到了这个芯片,用了一下,写点资料 主要特性 TEA5767HN是一款低功耗立体声收音IC,广泛应用于手机MP3 .MP 4 播 ...
- @synthesize和@dynamic
@synthesize 除非开发人员已经做了,否则由编译器自动生成getter/setter方法.当开发人员自定义存或取方法时,自定义会屏蔽自动生成该方法. @dynamic 告诉编译器,不自动生成g ...
- iOS自定义字体及类目
1:获取字体文件 从各种渠道下载字体文件ttf, 网站或者从别的ipa里扣出来.(以fzltxh.ttf为例) 2:将fzltxh.ttf文件拷贝到工程中 3:在Info.plist中添加项: Fon ...