css3 background-clip
2020-08-25 本文已影响0人
栗子daisy
background-clip属性值：
| 值 | 说明 |
|---|---|
| border-box | 默认值。背景绘制在边框方框内（剪切成边框方框） |
| padding-box | 背景绘制在衬距方框内（剪切成衬距方框） |
| content-box | 背景绘制在内容方框内（剪切成内容方框） |
| text | 给文本填充图片背景 |
background-clip浏览器支持
IE9+、Firefox、Opera、Chrome 以及 Safari 支持 background-clip 属性。
background-clip属性讲解
接下来我将通过具体实例来对background-clip这几个属性值一一进行讲解。
| background-clip | |
|---|---|
| border-box | 默认属性值,边框以外的背景部分裁掉 |
| padding-box | 内边距以外的背景部分裁掉 |
| content-box | 内容以外的背景部分裁掉 |
| text | 文字轮廓以外的背景部分裁掉而只留下文字轮廓以内的部分，而此时我们只需要通过设置文字为透明色即可透过文字看到盒子背景色 |
<div class="photo clip3">
<div class="content"></div>
</div>
.container *{
padding:0;
margin:0;
}
.photo {
width:520px;
height: 520px;
border-width:20px;
border-style:dashed;
padding:20px;
font-weight:bold;
color:#fff;
background:#ccc url(../images/zhm.png) no-repeat;
border-color: indianred;
background-origin: border-box;
}
.clip1{
background-clip: border-box;
}
.clip2{
background-clip: padding-box;
}
.clip3{
background-clip: content-box;
}
text
background-clip: text ，目前需要加上webkit前缀 。
.box{
-webkit-text-fill-color: transparent;
background: -webkit-linear-gradient(right,#0f0,#00f);
-webkit-background-clip: text;
}
<h1>TECHBOD</h1>
@import url("https://fonts.googleapis.com/css?family=Monoton");
html,
body {
width: 100%;
height: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
font-family: "Monoton", Helvetica, sans-serif;
background: #AB3428;
letter-spacing: 5px;
}
h1 {
display: inline;
font-size: 10vw;
text-transform: uppercase;
color: #F49E4C;
}
@media (min-width: 700px) {
h1 {
font-size: 30px;
}
}
@media (min-width: 1400px) {
h1 {
font-size: 80px;
}
}
@supports (-webkit-background-clip: text) {
h1 {
color: transparent;
background: -webkit-linear-gradient(83deg, #F5EE9E 50%, #F49E4C 0);
background: linear-gradient(7deg, #F5EE9E 50%, #F49E4C 0);
-webkit-background-clip: text;
}
}
