Maison > interface Web > tutoriel HTML > background-clip 背景图片做适当的裁剪_html/css_WEB-ITnose

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

WBOY
Libérer: 2016-06-24 11:50:46
original
1711 Les gens l'ont consulté

background-clip

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

语法:

background-clip : border-box | padding-box | content-box | no-clip
Copier après la connexion

参数分别表示从边框、内填充,或者内容区域向外裁剪背景。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>
Copier après la connexion

 

 

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal