background-clip屬性的通俗作用就是指定元素背景所在的區(qū)域,有四種取值
1、border-box
border-box是默認(rèn)值，表示元素的背景從border區(qū)域（包括border）以內(nèi)開始保留背景。
簡單代碼如下：
| <!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;<br> background-clip:border-box;} </style> </head> <body> <div class="box"></div> </body></html> |
效果如下：
從上圖我們可以看出，元素背景默認(rèn)是存在于邊框及以內(nèi)的區(qū)域，但是不知道為什么加背景圖片，不能全部覆蓋；而背景顏色則沒沒這個(gè)問題。
2、padding-box
padding-box表示元素的背景從padding區(qū)域(包括padding)以內(nèi)開始保留。
簡單代碼如下：
| <!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;<br> background-clip:padding-box;} </style> </head> <body> <div class="box"></div> </body></html> |
效果如下：
從上圖我們可以看出背景圖片存在于padding及以內(nèi)區(qū)域。
3、content-box
content-box表示元素的背景從內(nèi)容區(qū)域以內(nèi)開始保留。
簡單代碼如下：
| <!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;<br> background-clip:content-box;} </style> </head> <body> <div class="box"></div> </body></html> |
效果如下：
從上圖我們可以看出背景圖片存在于內(nèi)容區(qū)域以內(nèi)。
4、text
content-box表示元素的背景保留在前景內(nèi)容中（文字），和其形狀大小相同,目前僅支持chrome瀏覽器
簡單代碼如下：
新聞熱點(diǎn)
疑難解答
圖片精選
