溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下css3中background-clip和background-origin有哪些區(qū)別，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
在css3中，background-clip和background-origin它們2個的功能大致相同，但又有些細微差別。
一、background-clip屬性
background-clip：規(guī)定背景的繪制區(qū)域，當背景是純顏色時與圖片時，它的顯示方式又不一樣。它有3種屬性：border-box、padding-box、content-box.
1. border-box：背景是從邊框開始繪制，但當背景是圖片時，它是左邊和上邊是沒有繪制圖片，但下邊和右邊有；
代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div {
width:433px;
height:200px;
padding:50px;
background-color: red;
background-image:url('8.jpg');
background-repeat:no-repeat;
-webkit-background-clip:border-box;
border:10px dashed #92b901;
}
</style>
</head>
<body>
<div>
這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。 這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。 這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。 這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。 這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。 這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。
</div>
</body>
</html>效果圖：
2. padding-box：背景在邊框內(nèi)部繪制（不包括邊框）；
3. content-box：背景從內(nèi)容部分繪制；
二、background-origin屬性
background-origin:規(guī)定背景圖片的定位區(qū)域，它的屬性也有border-box、padding-box、content-box 這3種屬性，但要注意他的描述是“背景圖片”，也就是說它只能對背景做樣式上的操作，它相當于positon,規(guī)定了圖片開始繪制的的區(qū)域，也就是它只相當于規(guī)定圖片的左上角從什么地方開始，其他的它就不負責了；
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div {
width: 500px;
height: 300px;
/*padding: 50px;*/
background-color: red;
background-image: url('8.jpg');
background-repeat: no-repeat;
-webkit-background-origin: content-box;
background-size: 500px 380px;
border: 10px dashed #92b901;
}
</style>
</head>
<body>
<div>
這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。 這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。 這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。 這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。 這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。 這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。
</div>
</body>
</html>效果圖：
background-origin:繪制圖片時，是可以從邊框開始的，但有可能會被邊框覆蓋掉一些內(nèi)容，如上面的第二幅圖片
以上是css3中background-clip和background-origin有哪些區(qū)別的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業(yè)資訊頻道！
免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權內(nèi)容。
