2016-07-09 2 views
1

어쨌든 겹쳐서 글꼴을 가지고 멋진 아이콘 중간 또는 테두리가 투명합니까? 이 그림 에서처럼? 내가 완전히 엉망이 되었기 때문에 어떤 도움을 원할 것입니다. 여기에 내가 갈 일에 대한 이미지가 있습니다. 플러스 내 코드. enter image description here투명 한 가운데에 쌓인 글꼴 멋진 아이콘?

<span class="fa-stack fa-4x cool-span"> 
         <i class="fa fa-circle fa-stack-2x icon-background4"></i> 
         <i class="fa fa-circle-thin fa-stack-2x icon-background6"></i> 
         <i class="fa fa-heart fa-stack-1x"></i> 
       </span> 
+0

을 Gedy Rivera Social과 같이 보입니다. https://css-tricks.com/flat-icons-icon-fonts/ –

답변

0

나는 겹쳐진 글꼴 - 끔찍한 아이콘을 사용하여 그 효과를 복제하는 가장 좋은 방법은 CSS 요소 mix-blend-mode을 사용하는 것입니다. 부모가 hard-light으로 설정된 경우 나는이 기술을 사용하는 AWolf에서 바이올린을 채택했습니다

는 위치가 조금 가로장 설치 등등 잠재적 해키하지만 누군가가 부모와 자식

바이올린과 아이콘 스택 수있는 더 좋은 방법을 알고 있습니다 https://jsfiddle.net/0hftugox/3/

2

이 불투명도를 설정하면 그것을 투명하게 할 것이다, 당신을 위해 작동하는지 확인하십시오;

.fa.fa-heart { opacity : 0.1; } /* Change the value to suit your need */ 

또는/편집 한 후 글꼴 - 멋진 라이브러리를 선택 iconmoon 사이트에 투명성을

.fa.fa-heart { color: rgba(0,0,0,0.1); } 
+0

예, 불투명도는 투명도를 조정하는 좋은 방법이지만 효과를 내기가 어렵습니다. 이미지와 같습니다. 100 % 투명 심장 - 부울 뺄셈과 비슷합니다 (css에서 가능한지는 알 수 없음). 이 [jsfiddle] (https://jsfiddle.net/awolf2904/0hftugox/)을보십시오. – AWolf

+0

마음은 원 위에 쌓여 있으므로 한 번 투명하게 그려 보았습니다. –

0

이동을 설정 당신이 원하는대로 심장 아이콘을 추가하고 라이브러리를 다시 생성 RGBA를 사용합니다. 그것은 빠른 해결책이고 어떤 CSS 트릭도하지 않고

관련 문제