本章要跟大家介紹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中文網其他相關文章!