一、背景切割
 
background-clip ：border-box | padding-box | content-box
 
作用：为将背景图片做适当的裁剪，以适应需要。
 
默认格式 background-clip ：border-box，border的区域也有背景图，但是背景图图片是从border-top和border-left的位置开始平铺的，所以当背景图片no-repeat的时候，border-top和border-left的背景是背景色不是背景图，只有当背景repeat的时候，border-top和border-left才是背景图，并且border-top和border-left的背景是从图片的下边和右边开始平铺的。
比如：
 
使用的背景图 bac.jpg
 
当背景no-repeat的时候： 
代码：
 <!doctype html>

 <html lang="en">

 <head>

 <meta charset="UTF-8">

 <title>Document</title>

 <style type="text/css">

 .div1{

 width: 300px;

 height: 300px;

 border:50px dashed green;

 font-size: 60px;

 color: #fff;

 padding: 30px;

 margin: 30px;

 background: #fff url(bac.jpg) 0 0 no-repeat;

 background-clip: border-box;

 /*background-clip: padding-box;*/

 /*background-clip: content-box;*/

 }

 </style>

 </head>

 <body>

 <div class="div1">过后覅计划公交窖口换IP感觉</div>

 </body>

 </html>
 
效果一：
 
当背景repeat的时候：
代码：
 <!doctype html>

 <html lang="en">

 <head>

 <meta charset="UTF-8">

 <title>Document</title>

 <style type="text/css">

 .div1{

 width: 300px;

 height: 300px;

 border:50px dashed green;

 font-size: 60px;

 color: #fff;

 padding: 30px;

 margin: 30px;

 background: #fff url(bac.jpg) 0 0 no-repeat;

 background-clip: border-box;

 /*background-clip: padding-box;*/

 /*background-clip: content-box;*/

 }

 </style>

 </head>

 <body>

 <div class="div1">过后覅计划公交窖口换IP感觉</div>

 </body>

 </html>
 
效果二：
二、背景原点
 
background-origin ：border-box | padding-box | content-box
 
作用：决定图片的原始起始位置
 
比如上面的效果二，背景图片大于divd的宽高，但是border-top和border-left的背景是背景色是拉伸的，如果想要整个div就是一张图而没有平铺效果，怎么办呢？这就要使用background-origin 的配合，把background-origin 设置成background-origin ：border-box即可。background-clip和background-origin 就像一对好基友，一般都配合使用。
 
代码：
 <!doctype html>

 <html lang="en">

 <head>

 <meta charset="UTF-8">

 <title>Document</title>

 <style type="text/css">

 .div1{

 width: 300px;

 height: 300px;

 border:50px dashed green;

 font-size: 60px;

 color: #fff;

 padding: 30px;

 margin: 30px;

 background: #fff url(bac.jpg) 0 0 no-repeat;

 background-clip: border-box;

 /*background-clip: padding-box;*/

 /*background-clip: content-box;*/

 background-origin: border-box;

 }

 </style>

 </head>

 <body>

 <div class="div1">过后覅计划公交窖口换IP感觉</div>

 </body>

 </html>
 
效果：
 
background-clip和background-origin的区别:
background-clip是用来设置div（元素）中背景（包括背景色和背景图）的起始位置，而background-origin是截取的背景图的起始位置。
 
当有background-origin: content-box的时候：
 
 
没有background-origin: content-box的时候：
   
 
   从以上两张图可以明显看到截取的背景图位置不一样，当没有background-origin是背景图默认是从padding-top和padding-left截取的，当有background-origin，背景图截取的位置是有background-origin来决定的。
 
代码：
 <!doctype html>

 <html lang="en">

 <head>

 <meta charset="UTF-8">

 <title>Document</title>

 <style type="text/css">

 .div1{

 width: 200px;

 height: 200px;

 border:50px dashed green;

 font-size: 60px;

 color: #fff;

 padding: 100px;

 margin: 30px;

 background: #f00 url(bac.jpg) 0 0 no-repeat;

 background-clip: content-box;

 background-origin: content-box;

 }

 </style>

 </head>

 <body>

 <div class="div1"></div>

 </body>

 </html>
 
三、背景尺寸
 
background-size ：length/percentage/auto/cover/contain
 
作用：设置背景图的大小。
 
length： 长度值指定,代为px，接受两个数值如：background-size:400px 400px;，分别为宽、高，也可以设定一个数值，当只有一个数值是，背景长度为此数值，高度等比例伸缩。
percentage： 按背景图的百分比进行伸缩，也可以接受两个或者一个数值如：background-size:100% 100%;
auto： 真实大小如：background-size:auto;
cover：等比缩放到完全覆盖容器，背景图像有可能超出容器 如：background-size:cover;
contain： 将背景图像等比缩放到宽度或高度与容器的宽度或高度相等，背景图像始终被包含在容器内如：background-size:contain;
 
例子：
 <!doctype html>

 <html lang="en">

 <head>

 <meta charset="UTF-8">

 <title>Document</title>

 <style type="text/css">

 .div1{

 width: 200px;

 height: 200px;

 border:50px dashed green;

 padding: 100px;

 margin: 30px;

 background: #000 url(bac.jpg) 0 0 no-repeat;

 /*background-size:400px 400px;*/

 /*background-size:100% 100%;*/

 /*background-size:auto;*/

 background-size:cover;

 /*background-size:contain;*/

 }

 </style>

 </head>

 <body>

 <div class="div1"></div>

 </body>

 </html>
 
效果：
 
四、透明背景
 
background:rgba(255,0,0,0.6)
接受四参数，前3个为颜色参数范围0-255，最后一个为透明度范围0-1，数值越到透明度越小。
 
例子：
 <!doctype html>

 <html lang="en">

 <head>

 <meta charset="UTF-8">

 <title>Document</title>

 <style type="text/css">

 body{

 color: #fff;

 background: #000;

 }

 div{

 color: #fff;

 font-size: 50px;

 font-weight: bold;

 background: rgba(255,255,255,0.5);

 position: absolute;

 }

 </style>

 </head>

 <body>

 <div>会后集合与交通</div>

 </body>

 </html>
 
效果：
 
五、渐变背景
 
线性渐变：linear-gradient
径向渐变： radial-gradient
 
background:-webkit-linear | radial-gradient (水平起点 垂直起点 角度, 颜色1  0%, 颜色2  渐变到的位置百分比%, ... ,颜色N 100%);
如：background: -webkit-gradient(linear,left center,right center,from(yellow),color-stop(0.5,black),color-stop(0.5,#fff),to(blue));
 
线性渐变例子：
 <!doctype html>

 <html lang="en">

 <head>

 <meta charset="UTF-8">

 <title>Document</title>

 <style type="text/css">

 div{

 height: 100px;

 width: 100px;

 background: -webkit-gradient(linear,left center,right center,from(yellow),color-stop(0.5,black),color-stop(0.5,#fff),to(blue));

 }

 </style>

 </head>

 <body>

 <div></div>

 </body>

 </html>
 
效果：
 
关于gradient的前缀：
 -webkit-:苹果、谷歌
-ms-：ie
-moz-:火狐
-o-:欧朋
 
径向渐变例子：
 <!doctype html>

 <html lang="en">

 <head>

 <meta charset="UTF-8">

 <title>Document</title>

 <style type="text/css">

 div{

 height: 100px;

 width: 100px;

 border-radius: 50px;

 background: -webkit-gradient(radial,30 30,1,30 30,100,from(#fff),color-stop(0.3,yellow),to(blue));

 }

 </style>

 </head>

 <body>

 <div></div>

 </body>

 </html>
 
效果：

关于css3的背景切割（background-clip）、背景原点（background-origin）的使用的更多相关文章

  1. CSS3总结二：（background）背景/渐变色函数

    background-color(CSS2) background-image background-position background-size background-repeat backgr ...

  2. css3基础-选择器+边框与圆角+背景与渐变

    Css3选择器相关: section > div直接子元素选择器 div + article相邻兄弟选择器(在元素之后出现) div ~ article通用兄弟选择器(在元素之后出现) 属性选择 ...

  3. CSS（九）：background（背景属性）

    通过CSS背景属性,可以给页面元素添加背景样式. 背景属性可以设置背景颜色.背景图片.背景平铺.背景图像固定等. background-color(背景颜色) background-color属性定义 ...

  4. css考核点整理（八）-在什么情况下通过img引入图片，什么情况用背景图引入？背景属性有哪些

    在什么情况下通过img引入图片,什么情况用背景图引入?背景属性有哪些

  5. PDF如何去除背景，PDF去除背景颜色

    PDF文件在使用的时候大多都是单调的白色背景,但是也有小伙伴再制作PDF文件的时候会给PDF文件添加背景颜色,会有影响文字阅读的情况,这个时候就需要把背景颜色去除了,那么该怎么做呢,不会的小伙们就跟小 ...

  6. CSS3动画设置后台登录页背景切换图片

    CSS3的动画很实用很好用,简单几句话就可以做出一个好看而且过渡平滑的body背景图片,不多说,来来来,上代码 body{ animation:mybg 7s; -webkit-animation:m ...

  7. css3动画，点击圆形背景扩展整个页面效果

    上次做项目的时候,要求点击链接,这个链接的圆形背景扩散充满整个页面,今天把这个效果整理一下,是简单的css3的动画特效,粘贴下面的代码看效果 <!DOCTYPE html> <htm ...

  8. CSS3：元素的边框、背景和大小

    边框 和边框相关的属性例如以下. border-width 用于设置边框的宽度,可选择包含: 1)<长度值>:将边框宽度设为以CSS度量单位(如em.px.cm)表达的长度值. 2)< ...

  9. CSS3背景图片（多重背景、起始位置、裁剪、尺寸）

    一.多重背景图片 ①CSS3允许我们在一个元素上添加多个图片 ②多重背景可以把多个图片资源添加到background属性上,用逗号隔开,然后用background-position把他们定位到你想要的 ...

随机推荐

  1. Entity Framework 6 Code First创建

    基本上我是DB先设计好的,所以就按现存在的table去写程式. 1.Web.config里配置Db连接字串,Connection String Name为DefaultConnection <c ...

  2. 【搜索引擎Jediael开发笔记1】搜索引擎初步介绍及网络爬虫

    详细可参考 (1)书箱:<这就是搜索引擎><自己动手写网络爬虫><解密搜索引擎打桩实践> (2)[搜索引擎基础知识1]搜索引擎的技术架构 (3)[搜索引擎基础知识2 ...

  3. 总结:整理 oracle异常错误处理 .

    5.1 异常处理概念 5.1.1 预定义的异常处理 5.1.2 非预定义的异常处理 5.1.3 用户自定义的异常处理 5.1.4  用户定义的异常处理 5.2 异常错误传播 5.2.1 在执行部分引发 ...

  4. php的DOMDocument 如何判断xml是否存在某节点

    在做xml解释时,需要判断是否存在某个节点,查了手册函数,硬是没有发现那个函数有这个功能(如果你知道的话,请留言,博主感激涕零). 下面,就说下博主,经过N多博文,论坛查阅后,得到的一种方法(看到的博 ...

  5. Yii 2.0安装

    通过 Composer 安装 注意: php版本最好在5.5以上! 1.下载 Yii2的高级应用程序模板 ,然后将其解压缩到一个Web可访问的文件夹. 2.下载Composer-Setup.exe , ...

  6. python成长之路第三篇(3)_内置函数及生成器迭代器

    打个广告欢迎加入linux,python资源分享群群号:478616847 目录: 1.lambda表达式 2.map内置函数 3.filter内置函数 4.reduce内置函数 5.yield生成器 ...

  7. rsyslog 同时发生nginx 访问日志和错误日志

    input(type="imfile" File="/var/log/nginx/access.log" Tag="zjzc-frontend01-a ...

  8. mysql 开启事务

    START TRANSACTION, COMMIT, and ROLLBACK Syntax 开始事务,提交和回滚语法 那些语句提供了控制事务的使用: 1.START TRANSACTION 或者BE ...

  9. MFC子窗口和父窗口（SetParent,SetOwner）

    一.概念和区别 在windows系统中,每个窗口对象都对应有一个数据结构,形成一个list链表.系统的窗口管理器通过这个list来获取窗口信息和管理每个窗口.这个数据结构中有四个数据用来构建list, ...

  10. Go语言实现-观察者模式

    前前言 这个类经过我的正式投入使用啊,发现不对劲,这样做可能会导致线程死锁 比如你dispatch一个event,然后在这个回调里把那个事件的侦听给remove掉了,那么就会导致线程死锁(这个问题找了 ...