css3 彩虹文字解答

最新推荐文章于 2023-04-29 05:24:30 发布

南征北战-

最新推荐文章于 2023-04-29 05:24:30 发布

阅读量809

点赞数

分类专栏： css 文章标签： css3

本文链接：https://blog.csdn.net/qq_40910098/article/details/78601486

版权

css 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

#div6{
width: 1000px;
height: 200px;
margin: auto;
background:-webkit-linear-gradient(left,#ff0000,#ff9900 15%,#ffff00 30%,#00ff00 45%,#99ff33 60%,#0000ff 80%,#cc00ff 100%);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
font: bold 95px/1.5 georgia,sana-serif;
text-transform: uppercase;
}
#div7{
width: 1000px;
height: 200px;
margin: auto;

background:-webkit-linear-gradient(left,#ff0000,#ff9900 15%,#ffff00 30%,#00ff00 45%,#99ff33 60%,#0000ff 80%,#cc00ff 100%);
/* -webkit-background-clip:text;*/
-webkit-text-fill-color:transparent;
font: bold 95px/1.5 georgia,sana-serif;
text-transform: uppercase;

}

<div id="div6">Text-Fill-Color</div>
<div id="div7"></div>

解答分析：1 、 background:-webkit-linear-gradient(left,#ff0000,#ff9900 15%,#ffff00 30%,#00ff00 45%,#99ff33 60%,#0000ff 80%,#cc00ff 100%);

用来指定背景颜色的指令 webkit代指浏览器，linear代指按照按照颜色线性排列，gradient 梯度，left从正右方开始，红色为第一个颜色，

2、-webkit-background-clip:text; 剪辑文本，也就是只显示文本所在的背景颜色

3、 -webkit-text-fill-color:transparent; 让文字变透明

4、 font: bold 95px/1.5 georgia,sana-serif;字体样式