Question

我想让图标的颜色成为图像。因此，它不是紫色或其他东西，而是图像。我希望这是有道理的！

我有这段代码：

<span class="fa fa-coffee fa-5x coffee" 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

谢谢！

Answer 1

您可以使用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

Answer 2

如Turnip所述，有-webkit过滤器。但是使用SVG更方便：

<svg>
  <pattern id="mypattern" patternUnits="userSpaceOnUse" width="750" height="800">
    <image width="750" height="800" xlink:href="https://placekitten.com/g/100/100"></image>
  </pattern>
  <text x="0" y="80" class="fa fa-5x"
      style="fill:url(#mypattern);">&#xf0f4;</text>
</svg>

您只需要在SVG中包含图标字符

Demo fiddle

Answer 3

您还可以查看混合混合模式。 http://codepen.io/gc-nomade/pen/eZQdEg（或答案者底部的摘录）

https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode

对CSS的修改：

.coffee {
  position:relative;/* to bring it on top */
  mix-blend-mode:screen;/* we will blend from black and white colors */
  color:black;/* this color will blend */
  box-shadow: inset 0 0 0 100px white; /* this will be the mask color */
}
.infobox {/* #infobox should be used only once, so i use a class */
  position:relative;/* to position the child */
}
.infobox:before{/* child or pseudo */
  content:'';
  /* slide it under the .coffebox */
  left:50%;
  margin-left:-70px;
  height:140px;
  width:140px;
  position:absolute;
  /* image to blend with */ 
  background: url("https://www.dropbox.com/s/czz3m5ieucxwbrl/stars.gif?dl=1");
}

修改你的html （你使用不正确的ID太多次了）：

<div class="col-md-4 infobox " id="infobox" style="font-size: 28px;">
  <span class="fa fa-coffee fa-5x coffee" aria-hidden="true"></span>
</div>

.coffee {
  position: relative;
  mix-blend-mode: screen;
  color: black;
  box-shadow: inset 0 0 0 100px white;
}
.infobox {
  position: relative;
}
.infobox:before {
  content: '';
  height: 140px;
  width: 150px;
  position: absolute;
  background: url("https://www.dropbox.com/s/czz3m5ieucxwbrl/stars.gif?dl=1"),
  /* see gradient  while image loads*/
  linear-gradient(45deg, darkblue, white, darkblue, white, darkblue, white, darkblue, white);
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet" />
<div class="col-md-4 infobox " id="infobox" style="font-size: 28px;">
  <span class="fa fa-coffee fa-5x coffee" aria-hidden="true"></span>
</div>

Answer 4

如果你的背景是纯色，你可以使用倒置的SVG图标（填充的路径是空白区域，主要图标是切割/透明的）：

＆＃13;

html, body {
  padding: 0;
  margin: 0;
  height: 100%;
}

body {
  background: #ede1e9;
  display: flex;
  align-items: center;
  justify-content: center;
}

.maskicon {
  position: relative;
  background: url('http://i.giphy.com/l2QZVskdU1QXM3I1a.gif') no-repeat center;
  background-size: cover;
}

.maskicon svg {
  display: block;
  height: auto;
  width: auto;
}

.maskicon svg path { fill: #ede1e9; }

.maskicon.coffee svg { height: 45vh; }

＆＃13;

<div class="maskicon coffee">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="782 -846 1856 1792"><path d="M2254-398h-64v384h64c53.3 0 98.7-18.7 136-56s56-82.7 56-136-18.7-98.7-56-136-82.7-56-136-56z"/><path d="M782-846V562h1792c0 70.7-25 131-75 181s-110.3 75-181 75H1038c-70.7 0-131-25-181-75s-75-110.3-75-181v384h1870.9V-846H782zM2525.5 65.5c-75 75-165.5 112.5-271.5 112.5h-64v32c0 61.3-22 114-66 158s-96.7 66-158 66h-704c-61.3 0-114-22-158-66s-66-96.7-66-158v-736c0-17.3 6.3-32.3 19-45 12.7-12.7 27.7-19 45-19h1152c106 0 196.5 37.5 271.5 112.5S2638-312 2638-206 2600.5-9.5 2525.5 65.5z"/></svg>
</div>

＆＃13;

jsFiddle： https://jsfiddle.net/azizn/mp7fo9ah/

在SVG中设置HTML可让您轻松控制其fill颜色以匹配背景。如果您使HTML元素的位置绝对位置较高SVG，则可以进一步使用此内容并将z-index内容作为背景（如文字甚至视频）。

这需要更多维护，但与大多数浏览器兼容。

Answer 5

在your Codepen demo中，只需替换...

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

...与......

.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;
}

然后，https://www.dropbox.com/s/xal8sws9h4qy06l/tumblr_n6hoofK5GW1r0hv8uo1_500.gif?dl=1将成为您图标的背景图片。

您问题中代码的问题在于您使用的是选择器.coffee，您应该使用选择器.coffee:before。

编辑：

如果你想为魔杖使用相同的背景（如下面的评论所述），你可以使用例如。这个选择器：

.coffee:before, .fa-magic:before {
    background: url("https://www.dropbox.com/s/eg3v313y3fuha9b/ezgif.com-crop.gif?dl=1");
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

Answer 6

使用FontAwesome图标添加搜索图标。 searchbox是div或任何标记类名。

.searchbox:before {
  position:absolute;
  font: normal normal normal 14px/1 FontAwesome;
  top: 17px;
  left: 20px;
  content: "\f002";
}

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

6 个答案:

编辑：