關於css3的背景切割（background-clip）、背景原點（background-origin）的使用

時間 2019-11-12

標籤關於 css3 css 背景切割 background clip 原點 origin 使用欄目 CSS 简体版

原文原文鏈接

1、背景切割

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的時候：

代碼：

 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

效果一：

當背景repeat的時候：

代碼：

 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

效果二：

2、背景原點

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 就像一對好基友，通常都配合使用。

代碼：

 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

效果：

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來決定的。

代碼：

 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

3、背景尺寸

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;

例子：

 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

效果：

4、透明背景

background:rgba(255,0,0,0.6)

接受四參數，前3個爲顏色參數範圍0-255，最後一個爲透明度範圍0-1，數值越到透明度越小。

例子：

 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

效果：

5、漸變背景

線性漸變：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));

線性漸變例子：

 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

效果：

關於gradient的前綴：

-webkit-:蘋果、谷歌

-ms-：ie

-moz-:火狐

-o-:歐朋

徑向漸變例子：

 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

效果：

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。