background-clip outside the allowable distance (padding) or the content (content) you control the pitch of the background image or a color element extends.
.frame {
background-clip: padding-box;
}
value
border-box is the default. It allows the background element extends to the outer edge frame (border) of.
padding-box in the spacing element (padding) of the outer cutting edge of the background, and does not allow extending into the background border (border).
BACKGROUND content-box at an edge cut of the box element content.
inherit the parent background-clip is provided to the selected element.
Show
background-clip the best interpretation in action, so we will demonstrate two together to show how it works.
The first demo, inside each div has a paragraph. Paragraph is the content of div. Each div has a yellow background and a pixel 5, a light blue translucent border.
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>background-clip</title>
<meta name='description' content='background-clip'>
<meta name='keywords' content='background-clip'>
<style>
div {
background-color: yellow;
width: 225px;
padding: 1em 0;
border: 5px solid rgba(156, 224, 251, .5);
}
.nomargin {
margin: 0;
}
#border-box {
background-clip: border-box;
}
#padding-box {
background-clip: padding-box;
}
#content-box {
background-clip: content-box;
}
/* 外围样式, 与background-clip无关 */
body {
font-family: sans-serif;
}
div {
margin-bottom: 2em;
}
</style>
</head>
<body>
<h2>background-clip: border-box;</h2>
<div id="border-box">
<p>This paragraph is the content.</p>
</div>
<h2>background-clip: padding-box;</h2>
<div id="padding-box">
<p>This paragraph is the content.</p>
</div>
<h2>background-clip: content-box;</h2>
<h3>browser default paragraph margins</h3>
<div id="content-box">
<p>This paragraph is the content.</p>
</div>
<h2>background-clip: content-box;</h2>
<h3>paragraph is set to margin: 0;</h3>
<div id="content-box">
<p class="nomargin">This paragraph is the content.</p>
</div>
</body>
</html>
background-clip: border-box;
This paragraph is the content.
background-clip: padding-box;
This paragraph is the content.
background-clip: content-box;
Browser default paragraph margin value
This paragraph is the content.
background-clip: content-box;
Paragraph settings margin: 0;
This paragraph is the content.
Or set to default background-clip: an outer edge of the border-box ;, yellow background has been extended to the border. Please note that the border looks green, with a yellow background because it below.
When the background-clip was changed to padding-box, filled with the background color of the element (padding) the position of the end stops. Please note that the border is blue, because the background is allowed to enter the border area.
Using the background-clip: content-box ;, the background color is applied only to the content div, a single paragraph element in this embodiment. div's padding and borders and no background color. However, there are small details worth mentioning: color extends to a blank area of the content. See the difference between the first example and using the second content-box.
The first example of a content-box, the browser default margin value applied to the paragraph, the paragraph background outside the margin region clipping (herein refers to a background area comprising paragraphs margin area, but not beyond the margin paragraph of background div the color of the area.). In the second example, set the margin is 0, the background in the CSS starts shear text edge.
Interactive background-clip shown below with the background image. The contents of this demo is a small empty div.
<div class="box " id='border-box'>
<div class="little_box"></div>
</div>
<div class="box " id='padding-box'>
<div class="little_box"></div>
</div>
<div class="box " id='content-box'>
<div class="little_box"></div>
</div>
.box {
position: relative;
background: #545454 url(images/clipboard.png);
height: 200px;
width: 200px;
margin: 0 auto;
border: 18px solid rgba(0, 0, 0, 0.2);
background-clip: border-box;
background-origin: border-box;
background-size: cover;
background-repeat: no-repeat;
padding: 30px;
margin:2em auto;
}
.little_box {
text-align: center;
color: white;
font-size: 1.5em;
width: 100%;
height: 100%;
padding: 4px;
box-sizing: border-box;
}
#border-box {
background-clip: border-box;
}
#padding-box {
background-clip: padding-box;
}
#content-box {
background-clip: content-box;
}
border-box
padding-box
content-box
This demonstration also applies to background-size: cover and background-repeat: no-repeat background-clip together to control the background image, otherwise the image will be repeated to tile cutting position.
text
There is a prefix version of the engine can be used as a text background cut. In order to see this work, the text also needs to be transparent. Fortunately, there is another browser prefix text color attributes, which can effectively cover the color, because it has a fallback so that it can be used safely.
.background-clip-text {
/* 如果我们可以裁剪, 就那么做吧 */
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
/* 通过文本会展示什么
~ 或者 ~
那个元素的背景是什么 */
background: whatever;
/* 回退文本颜色
~ 或者 ~
文本的实际颜色，它更适合在背景上起作用 */
color: red;
}
Firefox, Chrome, and Safari 支持这个属性.
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>background-clip</title>
<meta name='description' content='background-clip'>
<meta name='keywords' content='background-clip'>
<style>
@import url(https://fonts.googleapis.com/css?family=Syncopate);
body {
background: black;
text-align: center;
padding: 120px 20px;
}
h1 {
display: inline-block;
font-size: 80px;
line-height: 0.9;
padding: 20px;
font-family: 'Syncopate', sans-serif;
text-transform: uppercase;
background: radial-gradient(circle farthest-corner at center center,
white,
#111) no-repeat;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
</style>
</head>
<body>
<h1>mega<br>fancy</h1>
</body>
</html>
