标签:
用来将背景图片做适当的裁剪以适应实际需要。
语法:
background-clip : border-box | padding-box | content-box | no-clip
参数分别表示从边框、或内填充,或者内容区域向外裁剪背景。no-clip表示不裁切,和参数border-box显示同样的效果。backgroud-clip
默认值为border-box。
效果如下图所示:
<!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>
标签:
原文地址:http://www.cnblogs.com/uduemc/p/4204326.html