如何使用CSS用颜色填充文本？
我用它来制作预测图标，当我尝试使用CSS3在图标之间进行组合来制作动画时，我尝试使用云来隐藏太阳，但我需要用颜色填充云，这可以用CSS实现吗，或者我需要将其作为SVG或画布 图片如下：如何使用CSS用颜色填充文本？,css,fonts,Css,Fonts,我用它来制作预测图标，当我尝试使用CSS3在图标之间进行组合来制作动画时，我尝试使用云来隐藏太阳，但我需要用颜色填充云，这可以用CSS实现吗，或者我需要将其作为SVG或画布 图片如下： 如果字体不包含实心云图像，则无法在CSS中执行此操作 可以使用SVG图像执行此操作。幸运的是，字体下载包含大量示例和字体的SVG版本，因此您可以从中提取图像并根据需要修改它 事实上，由于您所需要的只是云和太阳之间的白色背景，您可能不需要使用一个或两个CSS基本圆形状，而可以使用字体本身来显示更详细的云和太阳形状。
如果字体不包含实心云图像，则无法在CSS中执行此操作 可以使用SVG图像执行此操作。幸运的是，字体下载包含大量示例和字体的SVG版本，因此您可以从中提取图像并根据需要修改它
事实上，由于您所需要的只是云和太阳之间的白色背景，您可能不需要使用一个或两个CSS基本圆形状，而可以使用字体本身来显示更详细的云和太阳形状。既然已经给出了答案，这只适用于最终使用文本阴影的奇怪部分 运行下面的代码片段，找出它是关于什么的，或者使用它
@font-face{
字体系列：“iconvault”；
src:url（“http://web.arjentienkamp.com/codepen/forecast-font/iconvault_forecastfont.eot");
src:url（“http://web.arjentienkamp.com/codepen/forecast-font/iconvault_forecastfont.eot?#iefix）格式（“嵌入式opentype”），
网址（“http://web.arjentienkamp.com/codepen/forecast-font/iconvault_forecastfont.woff）格式（“woff”），
网址（“http://web.arjentienkamp.com/codepen/forecast-font/iconvault_forecastfont.ttf）格式（“truetype”），
网址（“http://web.arjentienkamp.com/codepen/forecast-font/iconvault_forecastfont.svg#iconvault）格式（“svg”）；
字体大小：正常；
字体风格：普通；
}
[class^=“icon-”]，
[类别*=“图标-”]{
字体系列：“iconvault”；
字体大小：正常；
字体风格：普通；
文字装饰：继承；
-webkit字体平滑：抗锯齿；
字号：86px；
}
身体{
背景：浅蓝色；
字号：1.25em；
}
/*-----云------*/
.图标云{
位置：相对位置；
}
.icon云：：之后{
内容：“\f106”；
颜色：rgb（204204204）；
位置：绝对位置；
文本阴影：0 0 2px#aaa；
}
.icon云：：之前{
内容：“\f106”；
颜色：rgb（204204204）；
位置：绝对位置；
字号：0.55em；
顶部：.45em；
左：.45em；
文本阴影：2px 0，-2px 0，2px 2px，-2px-2px，0-2px，
4px 0，-4px 0，4px 4px，-4px-4px，0-4px，
6px 0，-6px 0，6px 6px，-6px-6px，06px，0-6px，
8px 0，-8px 0，8px 7px，-8px-8px，07px，0-8px，
11px 0，-11px 0px，-12px 5px，-14px 0px，-10px 3px，-9px 3px，
0-6px，0-10px，0-11px，2px-11px，4px-11px；
字体大小：粗体
}
.inherit.icon cloud:：before{
颜色：继承；
}
.yellow.icon云：：之前{
颜色：黄色；
}
.purple.icon云：：之前{
颜色：紫色；
}
.red.icon云：：之前{
颜色：红色；
}
.white.icon云：：之前{
颜色：白色；
}
.transparent.icon cloud:：before{
颜色：透明；
}.cotton.icon云：：之前{
文本阴影：5px 5px 10px灰色，-5px-5px 10px灰色，-5px-5px 20px灰色，-5px-5px 20px灰色；
}
div{
显示：内联块；
}
李{
列表样式类型：无；
}
多云
多云
多云
多云
多云
多云
多云
多云
.cloud{
高度：30px；
宽度：30px；
边界半径：50%；
背景：浅灰色；
边框：5px实心浅灰色；
左边距：20px；
位置：相对位置；
z指数：8；
}
.云：以前{
内容：“；
位置：绝对位置；
高度：15px；
宽度：30px；
背景：浅灰色；
边界半径：15px；
边框：5px实心浅灰色；
左：-15px；
底部：-5px；
}
.云：之后{
内容：“；
位置：绝对位置；
高度：10px；
宽度：25px；
背景：浅灰色；
边界半径：10px；
边框：5px实心浅灰色；
右图：-15px；
底部：-5px；
}
.wap{
显示：内联块；
宽度：90px；
高度：80px；
}
孙先生{
高度：30px；
宽度：30px；
背景：黄色；
边界半径：50%；
位置：绝对位置；
左：55px；
顶部：10px；
盒子阴影：0 0 2px 2 px白色，0 0 0 4px 4 px黄色；
}