css中background添加文字,CSS3使用background-clip属性实现文本裁剪效果

CSS

语言：

CSSSCSS

确定

@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;

}

}