標籤:ati title img height 分享 meta ges doctype ack
1.background-origin
background-origin 裡面有3個參數 : border-box | padding-box | content-box;
border-box,padding-box,content-box從邊框,還是內邊距(預設值),或者是內容地區開始顯示。
代碼示範:
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>背景</title> <style type="text/css"> .wrap { width:220px; border:10px dashed salmon; padding:20px; font-weight:bold; color:#000; background:#ccc url(4.png) no-repeat; background-origin: border-box; position: relative; } .content { height:80px; border:1px solid #333; } </style></head><body><div class="wrap"> <div class="content">content</div></div></body></html>
插入的圖片放在本地:
效果
(1)padding-box
(2)content-box
(3)border-box
2.background cllip
用來將背景圖片做適當的裁剪以適應實際需要。
文法:
background-clip : border-box | padding-box | content-box | no-clip
代碼示範:
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>背景原點</title> <style type="text/css"> .wrap { width:220px; border:10px dashed salmon; padding:20px; font-weight:bold; color:#000; background:#ccc url(4.png) no-repeat; background-clip:border-box;/* 改變background的值, border-box | padding-box | content-box | no-clip */
position: relative; } .content { height:80px; border:1px solid #333; } </style> </head> <body> <div class="wrap"> <div class="content">content</div> </div> </body> </html>
效果
(1)border-box
圖片沒有從左邊框開始
(2)padding-box
(3)content-box
(4)backround clip 和background origin的區別
background-clip的真正作用是決定背景在哪些地區顯示。
background-origin是指背景顯示的地區,或者說背景是從哪個地區開始繪製的(邊框、補白或內容地區)
background origin
(1)padding-box
(2)content-box
(3)border-box
background clip
(1)border-box
圖片沒有從左邊框開始
(2)padding-box
(3)content-box
從上面的6個可以看出,background origin 的圖片是從邊框,內邊距,內容開始的,背景顏色沒有變化,而background clip 的圖片顯示在邊框,內邊距,內容中,背景顏色有變化,背景顏色分別從邊框,內邊距,內容開始,沒有的地方空白
ps:注意看背景顏色的變化
css3-background clip 和background origin