css中background-clip屬性的作用，cssbackground-clip

最後更新：2018-03-28 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

background-clip屬性的通俗作用就是指定元素背景所在的地區,有四種取值

1、border-box

border-box是預設值，表示元素的背景從border地區（包括border）以內開始保留背景。

簡單代碼如下：

<!doctype html><html>    <head>        <style>    *{margin:0;padding:0;}            .box{width:380px;height:280px;margin:100px auto;background:url("1.jpg") no-repeat -5px;padding:5px;border:5px dotted #000;
　　　　　　　background-clip:border-box;}        </style>   </head>   <body>       <div class="box"></div>   </body></html>

效果如下：

從我們可以看出，元素背景預設是存在於邊框及以內的地區，但是不知道為什麼加背景圖片，不能全部覆蓋；而背景顏色則沒沒這個問題。

2、padding-box

padding-box表示元素的背景從padding地區(包括padding)以內開始保留。

簡單代碼如下：

<!doctype html><html>    <head>        <style>    *{margin:0;padding:0;}            .box{width:380px;height:280px;margin:100px auto;background:url("1.jpg") no-repeat -5px;padding:5px;border:5px dotted #000;
            background-clip:padding-box;}        </style>   </head>   <body>       <div class="box"></div>   </body></html>

效果如下：

從我們可以看出背景圖片存在於padding及以內地區。

3、content-box

content-box表示元素的背景從內容地區以內開始保留。

簡單代碼如下：

<!doctype html><html>    <head>        <style>    *{margin:0;padding:0;}            .box{width:380px;height:280px;margin:100px auto;background:url("1.jpg") no-repeat -5px;padding:5px;border:5px dotted #000;
            background-clip:content-box;}        </style>   </head>   <body>       <div class="box"></div>   </body></html>

效果如下：

從我們可以看出背景圖片存在於內容地區以內。

4、text

content-box表示元素的背景保留在前景內容中（文字），和其形狀大小相同,目前僅支援chrome瀏覽器

簡單代碼如下：

<!doctype html><html>    <head>        <style>    *{margin:0;padding:0;}            .box{width:380px;height:280px;margin:100px auto;background:red;padding:5px;border:5px dotted #000;
             font-size:100px;font-weight；bold;-webkit-background-clip:text;-webkit-text-fill-color:transparent;}        </style>   </head>   <body>       <div class="box">你 好 你 好</div>   </body></html>

效果如下：

說明：目前值為text時，相容性極差，僅知道即可。

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More