首頁 > web前端 > html教學 > background-clip 背景图片做适当的裁剪_html/css_WEB-ITnose

background-clip 背景图片做适当的裁剪_html/css_WEB-ITnose

WBOY
發布: 2016-06-24 11:50:46
原創
1725 人瀏覽過

background-clip

用来将背景图片做适当的裁剪以适应实际需要。

语法:

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>
登入後複製

 

 

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板