关于css3的背景切割(background-clip)、背景原点(background-origin)的使用

一、背景切割
 
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
关于css3的背景切割(background-clip)、背景原点(background-origin)的使用
关于css3的背景切割(background-clip)、背景原点(background-origin)的使用
 
当背景no-repeat的时候: 
代码
关于css3的背景切割(background-clip)、背景原点(background-origin)的使用
 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4 <meta charset="UTF-8">
 5 <title>Document</title>
 6 <style type="text/css">
 7 .div1{
 8 width: 300px;
 9 height: 300px;
10 border:50px dashed green;
11 font-size: 60px;
12 color: #fff;
13 padding: 30px;
14 margin: 30px;
15 background: #fff url(bac.jpg) 0 0 no-repeat;
16 background-clip: border-box;
17 /*background-clip: padding-box;*/
18 /*background-clip: content-box;*/
19 }
20 </style>
21 </head>
22 <body>
23 <div class="div1">过后覅计划公交窖口换IP感觉</div>
24 </body>
25 </html>
View Code

 

 
效果一
 关于css3的背景切割(background-clip)、背景原点(background-origin)的使用
关于css3的背景切割(background-clip)、背景原点(background-origin)的使用
当背景repeat的时候:
代码
关于css3的背景切割(background-clip)、背景原点(background-origin)的使用
 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4 <meta charset="UTF-8">
 5 <title>Document</title>
 6 <style type="text/css">
 7 .div1{
 8 width: 300px;
 9 height: 300px;
10 border:50px dashed green;
11 font-size: 60px;
12 color: #fff;
13 padding: 30px;
14 margin: 30px;
15 background: #fff url(bac.jpg) 0 0 no-repeat;
16 background-clip: border-box;
17 /*background-clip: padding-box;*/
18 /*background-clip: content-box;*/
19 }
20 </style>
21 </head>
22 <body>
23 <div class="div1">过后覅计划公交窖口换IP感觉</div>
24 </body>
25 </html>
View Code

 

 
效果二:
关于css3的背景切割(background-clip)、背景原点(background-origin)的使用
关于css3的背景切割(background-clip)、背景原点(background-origin)的使用
二、背景原点
 
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 就像一对好基友,一般都配合使用。
 
代码:
关于css3的背景切割(background-clip)、背景原点(background-origin)的使用
 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4 <meta charset="UTF-8">
 5 <title>Document</title>
 6 <style type="text/css">
 7 .div1{
 8 width: 300px;
 9 height: 300px;
10 border:50px dashed green;
11 font-size: 60px;
12 color: #fff;
13 padding: 30px;
14 margin: 30px;
15 background: #fff url(bac.jpg) 0 0 no-repeat;
16 background-clip: border-box;
17 /*background-clip: padding-box;*/
18 /*background-clip: content-box;*/
19 background-origin: border-box;
20 }
21 </style>
22 </head>
23 <body>
24 <div class="div1">过后覅计划公交窖口换IP感觉</div>
25 </body>
26 </html>
View Code

 

 
效果:
关于css3的背景切割(background-clip)、背景原点(background-origin)的使用
 
关于css3的背景切割(background-clip)、背景原点(background-origin)的使用
background-clip和background-origin的区别:
background-clip是用来设置div(元素)中背景(包括背景色和背景图)的起始位置,而background-origin是截取的背景图的起始位置。
 
当有background-origin: content-box的时候:
关于css3的背景切割(background-clip)、背景原点(background-origin)的使用
 关于css3的背景切割(background-clip)、背景原点(background-origin)的使用
 
没有background-origin: content-box的时候:
关于css3的背景切割(background-clip)、背景原点(background-origin)的使用
   关于css3的背景切割(background-clip)、背景原点(background-origin)的使用
 
   从以上两张图可以明显看到截取的背景图位置不一样,当没有background-origin是背景图默认是从padding-top和padding-left截取的,当有background-origin,背景图截取的位置是有background-origin来决定的。
 
代码:
关于css3的背景切割(background-clip)、背景原点(background-origin)的使用
 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4 <meta charset="UTF-8">
 5 <title>Document</title>
 6 <style type="text/css">
 7 .div1{
 8 width: 200px;
 9 height: 200px;
10 border:50px dashed green;
11 font-size: 60px;
12 color: #fff;
13 padding: 100px;
14 margin: 30px;
15 background: #f00 url(bac.jpg) 0 0 no-repeat;
16 background-clip: content-box;
17 background-origin: content-box;
18 }
19 </style>
20 </head>
21 <body>
22 <div class="div1"></div>
23 </body>
24 </html>
View Code

 

 
三、背景尺寸
 
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;
 
例子:
关于css3的背景切割(background-clip)、背景原点(background-origin)的使用
 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4 <meta charset="UTF-8">
 5 <title>Document</title>
 6 <style type="text/css">
 7 .div1{
 8 width: 200px;
 9 height: 200px;
10 border:50px dashed green;
11 padding: 100px;
12 margin: 30px;
13 background: #000 url(bac.jpg) 0 0 no-repeat;
14 /*background-size:400px 400px;*/
15 /*background-size:100% 100%;*/
16 /*background-size:auto;*/
17 background-size:cover;
18 /*background-size:contain;*/
19 }
20 </style>
21 </head>
22 <body>
23 <div class="div1"></div>
24 </body>
25 </html>
View Code

 

 
效果:
关于css3的背景切割(background-clip)、背景原点(background-origin)的使用
 关于css3的背景切割(background-clip)、背景原点(background-origin)的使用
四、透明背景
 
background:rgba(255,0,0,0.6)
接受四参数,前3个为颜色参数范围0-255,最后一个为透明度范围0-1,数值越到透明度越小。
 
例子:
关于css3的背景切割(background-clip)、背景原点(background-origin)的使用
 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4 <meta charset="UTF-8">
 5 <title>Document</title>
 6 <style type="text/css">
 7 body{
 8 color: #fff;
 9 background: #000;
10 }
11 div{
12 color: #fff;
13 font-size: 50px;
14 font-weight: bold;
15 background: rgba(255,255,255,0.5);
16 position: absolute;
17 }
18 </style>
19 </head>
20 <body>
21 <div>会后集合与交通</div>
22 </body>
23 </html>
View Code

 

 
效果:
关于css3的背景切割(background-clip)、背景原点(background-origin)的使用
 关于css3的背景切割(background-clip)、背景原点(background-origin)的使用
五、渐变背景
 
线性渐变: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));
 
线性渐变例子:
关于css3的背景切割(background-clip)、背景原点(background-origin)的使用
 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4 <meta charset="UTF-8">
 5 <title>Document</title>
 6 <style type="text/css">
 7 div{
 8 height: 100px;
 9 width: 100px;
10 background: -webkit-gradient(linear,left center,right center,from(yellow),color-stop(0.5,black),color-stop(0.5,#fff),to(blue));
11 }
12 </style>
13 </head>
14 <body>
15 <div></div>
16 </body>
17 </html>
View Code

 

 
效果:
 关于css3的背景切割(background-clip)、背景原点(background-origin)的使用
关于css3的背景切割(background-clip)、背景原点(background-origin)的使用
关于gradient的前缀:
 -webkit-:苹果、谷歌
-ms-:ie
-moz-:火狐
-o-:欧朋
 
径向渐变例子:
关于css3的背景切割(background-clip)、背景原点(background-origin)的使用
 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4 <meta charset="UTF-8">
 5 <title>Document</title>
 6 <style type="text/css">
 7 div{
 8 height: 100px;
 9 width: 100px;
10 border-radius: 50px;
11 background: -webkit-gradient(radial,30 30,1,30 30,100,from(#fff),color-stop(0.3,yellow),to(blue));
12 }
13 </style>
14 </head>
15 <body>
16 <div></div>
17 </body>
18 </html>
View Code

 

 
效果:
关于css3的背景切割(background-clip)、背景原点(background-origin)的使用
关于css3的背景切割(background-clip)、背景原点(background-origin)的使用

关于css3的背景切割(background-clip)、背景原点(background-origin)的使用,布布扣,bubuko.com

关于css3的背景切割(background-clip)、背景原点(background-origin)的使用

上一篇:HTML5酷黑豪华网络公司板子 还是超华丽那味


下一篇:省市县三级联动 js