css3如何區分background-clip和background-origin ?（程式碼實例）
- 青灯夜游原創
- 2018-09-14 16:58:231594瀏覽
本章要跟大家介紹css3如何區分background-clip和background-origin？ （程式碼實例）。有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。
在css3中，background-clip和background-origin它們2個的功能大致相同，但又有些細微差別。
一、background-clip屬性
background-clip：規定背景的繪製區域，當背景是純顏色時與圖片時，它的顯示方式又不一樣。它有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：背景在邊框內部繪製（不包括邊框）；
3. content-box：背景從內容部分繪製；
二、background-origin屬性
background-origin:規定背景圖片的定位區域，它的屬性也有border-box、padding-box、content-box 這3種屬性，但要注意他的描述是“背景圖片”，也就是說它只能對背景做樣式上的操作，它相當於positon,規定了圖片開始繪製的的區域，也就是它只相當於規定圖片的左上角從什麼地方開始，其他的它就不負責了；
<!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:繪製圖片時，是可以從邊框開始的，但有可能會被邊框覆蓋掉一些內容，如上面的第二張圖片
以上是css3如何區分background-clip和background-origin ?（程式碼實例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：關於前端學習之css下一篇：關於前端學習之css