is used to crop the background image appropriately to suit actual needs.
Syntax:
background-clip : border-box | padding-box | content-box | no-clip
parameters respectively represent filling from the border, or , or content area outwards Crop the background. no-clip means no clipping, and the parameter border-box shows the same effect. The default value of backgroud-clip is border-box.
The effect is as shown below:
<!DOCTYPE html><html><head> <meta charset="utf-8"><title>背景裁切</title><style type="text/css">.wrap { width:220px; border:20px dashed #000; padding:20px; font-weight:bold; color:#000; background:#ccc url(http://static.mukewang.com/static/img/logo_index.png) no-repeat; background-origin: border-box; background-clip: content-box; position: relative;}.wrap span { position: absolute; left:0; top:0;}.content { height:80px; border:1px solid #333;}</style> </head> <body><div class="wrap"><span>padding</span> <div class="content">content</div></div></body></html>