HTML – 如何将背景图像添加到字体真棒图标？

概述我想让图标的颜色成为图像.因此,它不是紫色或其他东西,而是图像.我希望这是有道理的！ 我有这个代码： <span class="fa fa-coffee fa-5x coffee" aria-hidden="true"></span> 和班级： .coffee {background: url("https://www.dropbox.com/s/xal8sws9h4qy06l/tumblr_n 我想让图标的颜色成为图像.因此,它不是紫色或其他东西,而是图像.我希望这是有道理的！

我有这个代码：

<span  aria-hIDden="true"></span>

和班级：

.coffee {background: url("https://www.dropBox.com/s/xal8sws9h4qy06l/tumblr_n6hoofK5GW1r0hv8uo1_500.gif?dl=1");}

但这只是将图标周围的区域更改为该图像,而不是内部.

这是整个页面,我试图修改的图标是咖啡杯：http://codepen.io/l-emi/pen/QNZevb

谢谢！

解决方法 您可以使用background-clip和text-fill-color在webkit浏览器中实现此功能,但遗憾的是它无法在其他浏览器中使用：

.coffee:before {  background: url("https://www.dropBox.com/s/xal8sws9h4qy06l/tumblr_n6hoofK5GW1r0hv8uo1_500.gif?dl=1");  -webkit-background-clip: text;  -webkit-text-fill-color: transparent;}

EXAMPLE

总结

以上是内存溢出为你收集整理的HTML – 如何将背景图像添加到字体真棒图标？全部内容，希望文章能够帮你解决HTML – 如何将背景图像添加到字体真棒图标？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。