Question

这是我的问题：

我有一个带有社交图标的部分。本节位于具有背景图像的较宽的div中。现在，我想给每个图标一个白色的圆形背景，但是我想使图标保持透明，这样我会得到令人愉悦的效果，但是我不想用photoshop（png图像）来做，因为这样会更容易并且更容易其实不是我的目标。

我想使用HTML，Font-Awesome和CSS。

这是我的目标：

这是我的标记和CSS：

HTML：

<div class="splash-image">
    <div class="letterhead">
      <ul class="social">
        <li><i class="fab fa-facebook-f"></i></li>
        <li><i class="fab fa-twitter"></i></li>
        <li><i class="fab fa-linkedin-in"></i></li>
        <li><i class="fab fa-instagram"></i></li>
      </ul>
    </div>
  </div>

SCSS：

.splash-image {
    font-size: 1.9rem;
    text-transform: uppercase;
    font-weight: 100;
    background-image: url(../images/myimage.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    height: 96vh;
    .letterhead {
        .social {
            li {
                display: inline-block;
                width: 30px;
                height: 30px;
                background: white;
                i::before{
                    background:transparent;
                }
            }
        }
    }
}

首先：这可行吗？

Answer 1

如果您非常致力于仅使用这些技术的任务，那么可以使用滤镜和绿屏技术来实现您的目标。但是结果有点松脆，我建议使用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>

Answer 2

您可以使用遮罩使图标透明。作为遮罩，图标本身将是。
要使图标的主体透明，必须用黑色fill ="black"

填充它。

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
	       viewBox="0 0 1920 1200">
  <defs>
  <mask id="msk1">
   <rect fill="white" width="100%" height="100%"/>
  <path transform="scale(4) translate(10 35)"  d="M2,13A11,11 0 0 0 24,13A11,11 0 0 0 2,13
           M19.805,7.708
			c-0.334,0.446-0.667,0.892-1.022,1.365c0.403-0.106,0.822-0.216,1.24-0.326c0.019,0.023,0.036,0.047,0.055,0.07
			c-0.087,0.123-0.161,0.259-0.264,0.367c-0.331,0.353-0.784,0.642-0.98,1.056c-0.197,0.414-0.115,0.952-0.201,1.427
			c-0.103,0.558-0.215,1.12-0.392,1.658c-0.555,1.682-1.577,3.028-3.007,4.072c-0.75,0.549-1.583,0.949-2.468,1.178
			c-1.351,0.349-2.726,0.382-4.108,0.087c-0.786-0.167-1.515-0.448-2.216-0.823c-0.095-0.051-0.173-0.134-0.245-0.242
			c1.4-0.03,2.714-0.242,3.812-1.196c-1.171-0.268-2.009-0.871-2.437-2.066c0.319-0.03,0.593-0.056,0.868-0.082
			c-1.148-0.626-1.847-1.475-1.914-2.851c0.409,0.114,0.737,0.206,1.135,0.317c-0.312-0.437-0.594-0.764-0.801-1.133
			C6.407,9.781,6.45,8.941,6.788,8.107c0.08-0.197,0.199-0.271,0.386-0.058c0.839,0.958,1.839,1.723,3.03,2.167
			c0.796,0.297,1.65,0.439,2.483,0.63c0.042,0.01,0.17-0.164,0.187-0.265c0.077-0.449,0.081-0.915,0.198-1.351
			c0.218-0.806,0.782-1.369,1.526-1.683c1.085-0.458,2.146-0.341,3.084,0.407c0.294,0.233,0.562,0.205,0.866,0.086
  c0.378-0.148,0.756-0.295,1.135-0.443C19.723,7.635,19.764,7.672,19.805,7.708z"/>
  </mask>
  </defs> 
   
   <image xlink:href="https://i.stack.imgur.com/BpeqF.jpg" width="100%" height="100%" mask="url(#msk1)"/> 
   
  </svg>

Answer 3

可以使用svg而不是使用Font-Awesome图标。在SVG中，如果您绘制一条路径，其中零件是顺时针绘制的，而另一个零件是逆时针绘制的，则会得到一个孔：

body{background:gold}

    <svg viewBox="0 0 26 26" width="100">  
      <path d="M0,0 L26,0 26,26 0,26 0,0 M21,5 5,5 5,21 21,21 21,5" />
    </svg>

您可以在SVG中创建带有社交图标孔的圆圈的方法相同：

body{background:gold;}

<svg viewBox="0 0 26 26" width="30">
  <path d="M2,13A11,11 0 0 0 24,13A11,11 0 0 0 2,13
           M19.805,7.708
			c-0.334,0.446-0.667,0.892-1.022,1.365c0.403-0.106,0.822-0.216,1.24-0.326c0.019,0.023,0.036,0.047,0.055,0.07
			c-0.087,0.123-0.161,0.259-0.264,0.367c-0.331,0.353-0.784,0.642-0.98,1.056c-0.197,0.414-0.115,0.952-0.201,1.427
			c-0.103,0.558-0.215,1.12-0.392,1.658c-0.555,1.682-1.577,3.028-3.007,4.072c-0.75,0.549-1.583,0.949-2.468,1.178
			c-1.351,0.349-2.726,0.382-4.108,0.087c-0.786-0.167-1.515-0.448-2.216-0.823c-0.095-0.051-0.173-0.134-0.245-0.242
			c1.4-0.03,2.714-0.242,3.812-1.196c-1.171-0.268-2.009-0.871-2.437-2.066c0.319-0.03,0.593-0.056,0.868-0.082
			c-1.148-0.626-1.847-1.475-1.914-2.851c0.409,0.114,0.737,0.206,1.135,0.317c-0.312-0.437-0.594-0.764-0.801-1.133
			C6.407,9.781,6.45,8.941,6.788,8.107c0.08-0.197,0.199-0.271,0.386-0.058c0.839,0.958,1.839,1.723,3.03,2.167
			c0.796,0.297,1.65,0.439,2.483,0.63c0.042,0.01,0.17-0.164,0.187-0.265c0.077-0.449,0.081-0.915,0.198-1.351
			c0.218-0.806,0.782-1.369,1.526-1.683c1.085-0.458,2.146-0.341,3.084,0.407c0.294,0.233,0.562,0.205,0.866,0.086
  c0.378-0.148,0.756-0.295,1.135-0.443C19.723,7.635,19.764,7.672,19.805,7.708z"/></svg>

带有svg或带有彩色背景的<i>标签的透明图标

3 个答案: