css3,background-clip/background-origin的使用场景，通俗讲解
先不说background-clip/background-origin的用法，我们先来聊聊css背景方面的知识。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css背景知识点</title>
<style>
body,p{
margin:0;
padding:0;
}
p{
width:100px;
height:100px;
background-color:pink;
}
</style>
</head>
<body>
<p></p>
</body>
</html>
现在p的宽和高各是100px，颜色的范围也是100*100的对吧，如果给它加上padding-top：10px呢？那么现在的高是110，颜色的背景是100*110对不？
因为背景是包括padding的，这对理解为什么需要使用background-clip和background-origin至关重要。
透露一下，大部分情况会使用在有用精灵图的背景上。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css背景知识点</title>
<style>
body,p{
margin:0;
padding:0;
}
.box{
width:100%;
height:45px;
line-height:45px;
background-color:#ccc; }
p{
width:42px;
height:40px;
margin:0 auto;
background-size:50px 50px;
background:url("focus-icon.png") no-repeat 0 -50px;
}
</style>
</head>
<body>
<div class="box">
<p></p>
</div>
</body>
</html>
效果图
我现在想让中间的爱心Y方向向下移动一点，我给p标签加上padding-top:10px;
效果如下
它并没有向下移动而是高度多出了一些，如果你理解了我上面说的，那你应该可以理解这个。
之所以会这样是因为背景包括了padding。但是我们现在并不想这样，那就可以用css3的属性background-clip，这是一个裁剪属性
加上background-clip:content-box;就可以了，什么意思呢？就是说从内容开始计算背景，那么就不会包括padding了。
应该懂了吧？
那么background-origin什么意思呢？
不知道你们有没有方向一个现象，就是我们使用精灵图的时候默认图片会显示在左上角。
如果你想改变它的位置就可以使用background-oringin
如果想从中间开始，那就设置成background-oringin:content-box;
当然还有其他的一些属性，你们可以去网上查一下。
css3,background-clip/background-origin的使用场景，通俗讲解的更多相关文章
- CSS3的背景background
CSS3中的Background属性 background: background-image || background-position/background-size || background ...
- 理解CSS3中的background－size(对响应性图片等比例缩放)
理解CSS3中的background-size(对响应性图片等比例缩放) 阅读目录 background-size的基本属性 给图片设置固定的宽度和高度的 固定宽度400px和高度200px-使用ba ...
- CSS3实战之background篇
在CSS3中,background可以添加多个背景图像组,背景图像之间通过逗号进行分隔. 每个背景图像层都可以包含下面的值 background-image 定义背景图像 background-col ...
- CSS3 & gradient & color & background
CSS3 & gradient & color & background css background https://developer.mozilla.org/en-US/ ...
- 从原理到场景 系统讲解 PHP 缓存技术
第1章课程介绍 此为PHP相关缓存技术的课堂,有哪些主流的缓存技术可以被使用? 第1章 课程介绍 1-1课程介绍1-2布置缓存的目的1-3合理使用缓存1-4哪些环节适合用缓存 第2章 文件类缓存 2- ...
- css3新增属性-background背景
css3新增属性 边框属性 背景属性 文字属性 颜色属性 背景属性 属性 说明 background-image 添加背景图片 background-size 指定背景图像的大小 background ...
- CSS3中的background－size(对响应性图片等比例缩放)
background-size的基本属性 background-size: 可以设定背景图像的尺寸,该属性是css3中的,在移动端使用的地方很多,比如最常见的地方在做响应性布局的时候,比如之前做的项目 ...
- css3新增的background属性
1.background-size 可取值:auto(背景图片正常显示) size size (150px 40%) cover (背景图片覆盖整个背景) contain(背景图片缩小填满整个背景) ...
- html5+css3中的background: -moz-linear-gradient 用法
在CSS中background: -moz-linear-gradient 让网站背景渐变的属性,目前火狐3.6以上版本和google浏览器支持这个属性. background: -moz-linea ...
- html5+css3中的background: -moz-linear-gradient 用法 (转载)
转载至-->http://www.cnblogs.com/smile-ls/archive/2013/06/03/3115599.html 在CSS中background: -moz-linea ...
随机推荐
- EndPoint详解
EndPoint详解 EndPoint主要用于暴露一些SpringMvc内部运行的信息,通常是通过SpringMvc的请求地址获取相关信息.如/health获取健康检查信息. 简单单元测试 @Test ...
- 【资源集合】94个iOS开发资源推荐，帮你加速应用开发
资源总结类文章总是开发者们所喜欢的,网上已经有各种weekly.头条以及期刊类资源总结,今天这篇来自于开发者Viswateja Reddy的总结.原文对各个项目的介绍非常简单,为了更便于阅读,编辑在原 ...
- Mysql：Error Code 1235,This version of MySQL doesn’t yet support ‘LIMIT & IN/ALL/ANY/SOME 错误解决
This version of MySQL doesn’t yet support ‘LIMIT & IN/ALL/ANY/SOME 错误解决 这次国庆节回来后的测试中,在一个Mysql表达式 ...
- WindowsPhone-GameBoy模拟器开发四--Gameboy显示系统分析
这次说一下GB的显示系统,先从一幅Gb的内存分布图说起,请看图: 图中红色框框起来的部分就是这篇文章关注的部分,这一部分的内存地址从8000-9Fff,共8KB,这一部分是从来存储背景和游戏“精灵”的 ...
- Node-restify 简介
restify 是Node.js的模块.虽然restify的API或多或少的参考了express,但restify不是一个MVC框架,它是一套为了能够正确构建REST风格API而诞生的框架. http ...
- 使用cow将socks5代理转为http代理（Windows版）
自己租vps架设shadowsocks服务器,再配合chrome的SwitchyOmega插件科学上网一直很稳定,但是windows很多软件都不支持socks5,经常也会需要配置http代理做更新上传 ...
- [玩转微信平台]XML的格式化- 如何去掉XML 文档头和命名空间
前言 系统要求能够回复微信用户发过来的文本消息.实现中使用的实体对象进行XML的序列化的方式来实现XML消息. 微信平台的回复例子 http://mp.weixin.qq.com/wiki/14/ ...
- 结合仓库设计MVC控制器
为了更高效的开发MVC项目,我们对控制器进行了在一次的封装,使得控制器能够获得很好的继承关系,并能以更少 的代码,实现Web项目的开发工作,整个控制器的设计思路如下所示. 从上图的设计里面 ...
- WordPress添加固定位置的百度分享按钮
第一步,在你所用主题目录新建一个名称为:share.php的模板文件,将下面的代码复制到进去并保存 <div id="share"> <div class=&qu ...
- Linux连续执行多条命令
引自:这里 每条命令使用";"隔开,则无论前边的命令执行成功与否都会继续执行下一条命令这里,故意将第二条命令中的echo多写了一个o,命令执行出错,但并不影响后续命令的执行可以这么 ...