Home >Web Front-end >HTML Tutorial >background-clip The background image is appropriately cropped_html/css_WEB-ITnose
background-clip The background image is appropriately cropped_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:50:461750browse
background-clip
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>
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn