Heim >Web-Frontend >HTML-Tutorial >background-clip 背景图片做适当的裁剪_html/css_WEB-ITnose
background-clip 背景图片做适当的裁剪_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:50:461708Durchsuche
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>
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：使用模板引擎渲染HTML界面_html/css_WEB-ITnoseNächster Artikel：精通CSS+DIV网页样式与布局滤镜的使用_html/css_WEB-ITnose