SVG/CSS : 마스크 된 헤더 로고

Question

그림자가있는 부분이 실제로 그 뒤에있는 내용의 투명한 창인 마스크 된 로고를 만들려고합니다. 내가 SVG 및 마스킹 이것을 해결하기 위해이 생각하고

하지만, 여기에 본 나의 시도는 정말 잘 가지 않았다 :

디자인이 같다

@charset "utf-8"; 
 
*{margin:0;padding:0} 
 
body{ 
 
\t width:100%; 
 
\t min-height:100%; 
 
\t background-color:#eee; 
 
\t color:#eee; 
 
} 
 
/*Header 
 
-------------*/ 
 
header{ 
 
\t position:fixed; 
 
\t top:0; 
 
\t width:100%; 
 
\t height:20%; 
 
\t height:auto; 
 
\t z-index:999; 
 
} 
 
#logo:before{ 
 
\t width:10%; 
 
\t height:15vw; 
 
\t display:block; 
 
\t content:""; 
 
\t background:#fff; 
 
\t float:left; 
 
} 
 
#logo:after{ 
 
\t width:80%; 
 
\t height:15vw; 
 
\t display:inline-block; 
 
\t content:""; 
 
\t background:#fff; 
 
} 
 
#logo img{ 
 
\t float:left; 
 
\t width:10%; 
 
} 
 
/*Content 
 
-------------*/ 
 
main{ 
 
\t position:relative; 
 
\t margin:auto; 
 
\t width:100%; 
 
\t height:200%; 
 
\t background:#2d917f 
 
} 
 
/*Links 
 
-------------*/ 
 
a,a:visited{ 
 
\t color:#eee; 
 
\t text-decoration:none; 
 
\t -webkit-transition:all .2s ease; 
 
\t -moz-transition:all .2s ease; 
 
\t -o-transition:all .2s ease; 
 
\t transition:all .2s ease; 
 
} 
 
a:active, a:hover{ 
 
\t color:#fff; 
 
\t border-bottom:1px solid #fff 
 
} 
 
/*Scrollbar 
 
-------------*/ 
 
::-webkit-scrollbar{width:12px;height:12px;background-color:#1A1A1A} 
 
::-webkit-scrollbar-corner{background-color:#0e0e0e} 
 
::-webkit-scrollbar-track{background-color:#121212} 
 
::-webkit-scrollbar-thumb{background:#2d917f} 
 
::-webkit-scrollbar:horizontal{height:12px} 
 
/*Selection 
 
-------------*/ 
 
::selection{color:#fff;background-color:#2d917f} 
 
::-moz-selection{color:#fff;background-color:#2d917f}

<header> 
 
\t <div id="logo"> 
 
\t \t <img src="https://ap-images.ga/up/2017/05/11151821-Logo2.svg" title="11145933-Logo.svg" alt="11145933-Logo.svg"/> 
 
\t </div> 
 
</header> 
 
<main> 
 
</main>

Codepen에

: https://codepen.io/RafaelDeJongh/pen/PmROPW

누구나 내가이 문제를 어떻게 해결할 수 있을지 잘 모르겠다. 일반적으로 요소 (이 경우 헤더)의 특정 부분을 마스크하는 방법은 무엇입니까?

미리 감사드립니다.

Answer 1

가장 간단한 해결책은 그냥 SVG 수 있도록하는 것입니다 :

• 사각형이 흰색 배너 배경을 형성하는
• 에 적용 마지막으로 그 형성 전체
• 그림자 필터에 적용되는 마스크 결과

그런 다음 해당 SVG를 페이지에 삽입하고 배너 텍스트를 오버레이하거나 SVG를 별도의 파일로 저장 한 다음 해당 페이지의 background-imaage으로 사용하십시오. <header>

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1860 256"> 
 
    <defs> 
 
    <mask id="hole"> 
 
     <rect width="100%" height="100%" fill="white"/> 
 
     <g transform="translate(200,35)"> 
 
     <rect x="1" y="1" width="118" height="178" fill="#000"/> 
 
     <path fill="white" d="M0.1,0h119.8v180H0.1V0 M3.2,33.2c0,13.8,0,27.7,0,41.5C18.6,75.1,33.9,80.4,46,90c-0.1-5.1,0-10.2-0.1-15.3 
 
\t \t \t \t c16.3-0.2,32.7,5,45.6,15c12.2,9.5,22,22.9,25.4,38.1c-0.4-31.5,0-63-0.2-94.5C78.9,33.2,41.1,33.2,3.2,33.2 M3.6,77.9 
 
\t \t \t \t c0,23,0,45.9,0,68.9c14.1,0,28.3,0,42.4,0c0-17.6,0-35.1,0-52.7C34.2,84,18.9,78.4,3.6,77.9 M49,78c0.1,4.8,0,9.5,0,14.2 
 
\t \t \t \t c15.5,13.6,25.1,33.8,25,54.5c14.1,0,28.3,0,42.4,0c0.5-17.7-7.1-35.2-19.3-47.8C84.7,86.1,67,78.2,49,78 M49.1,96.6 
 
\t \t \t \t c0.1,16.7,0,33.4,0,50.2c7.3,0,14.6,0,21.8,0C70.9,128,62.6,109.6,49.1,96.6z"/> 
 
     </g> 
 
    </mask> 
 
    <filter id="shadow"> 
 
     <feOffset in="SourceAlpha" dx="10" dy="10" result="offset" /> 
 
     <feColorMatrix in="offset" type="matrix" values="0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 1 0" result="greyoff" /> 
 
     <feGaussianBlur in="greyoff" stdDeviation="7" result="blur" /> 
 
     <feBlend in="SourceGraphic" in2="blur" mode="normal" /> 
 
    </filter> 
 
    </defs> 
 

 
    <g filter="url(#shadow)"> 
 
    <rect x="15" y="15" width="1800" height="220" fill="white" mask="url(#hole)"/> 
 
    </g> 
 
</svg>

LuisP.A @