时间戳

首页 > 解决方案 > 带有彩色背景的 svg 或标记的透明图标

svg - 带有彩色背景的 svg 或标记的透明图标

问题描述

标签： svgbackgroundiconsfont-awesometransparent

解决方案

如果您非常专注于使用这些技术的使命，那么可以使用过滤器和绿屏技术来实现您的目标。但结果有点脆，我建议使用 SVG 解决方案——这就是 SVG 的目的。

body{
  background-image: url("https://images.unsplash.com/photo-1501630834273-4b5604d2ee31?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80");
}	

.circle{
	border-radius: 50%;
	margin: 0.3em;
	font-size: 4em;
	}
	
.fa-twitter{
  background: white;
	color: red;
  padding: 0.15em 0.19em;
	}


.fa-facebook{
  background: white;
	color: red;
  padding: 0.13em 0.41em;
	}

.redknockout {
  filter: url(#red-knockout);
}
<link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.1/css/font-awesome.css" rel="stylesheet">

<i class="fa fa-twitter circle redknockout"></i>
<i class="fa fa-facebook circle redknockout"></i>

<svg>
  <defs>
    <filter id="red-knockout">
      <feColorMatrix type="matrix"
                     values="1 0 0 0 0 
                             0 1 0 0 0 
                             0 0 1 0 0 
                             -1 1 1 0 0"/>
    </filter>
  </defs>
</svg>

推荐阅读