html通过透明度使文字模糊,html – 如何模糊或为fontawesome图标添加透明度

正如Font Awesome的主页所述：

Font Awesome gives you scalable vector icons that can instantly be customized — size, color, drop shadow, and anything that can be done with the power of CSS.

绝对没有理由不使用CSS,所以无视你不使用CSS的要求我会给你一个CSS解决方案,并建议你使用它而不是我提供的非CSS解决方案：

CSS解决方案

Font Awesome图标是字体中包含的字符.这使它们成为常规文本,允许您像常规文本一样设置字符样式.

.fa-li.fa.fa-2x.fa-check {

opacity: 0.75; /* Opacity (Transparency) */

color: rgba(0, 0, 0, 0.75); /* RGBA Color (Alternative Transparency) */

-webkit-filter: blur(2px); /* Blur */

-moz-filter: blur(2px);

filter: blur(2px);

}

更好的解决方案可能只是将图标的颜色更改为不太突出的颜色：

.fa-li.fa.fa-2x.fa-check {

color: #444;

}

非CSS解决方案

如果您真的想要一个非CSS解决方案,就像您在问题中所述,您可以做的一件事是将相关图标保存为图像,并在任何图片编辑软件中使用它来应用您正在寻找的效果对于.然后,您可以将图像上传到服务器并将其作为img元素包含在内,而不是使用提供的Font Awesome CSS添加图标：