css プロパティの svg mask を使うと、背後の要素を覆い隠すマスキングをすることが出来ます。マスキングを使って、背景の画像や、動画を切り取ることが出来ます。この記事では、マスキングの使う方法を確認していきます。
背景とsvg を重ねる
<div class="content content-1">
<video src="a.mp4"></video>
<svg>
<rect x="0" y="0" width="100%" height="100%" fill="gray"/>
</svg>
</div>
2, 4: ビデオ要素で動画と svg で四角形を配置します。
.content {
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
video {
width: 100%;
height: 100%;
object-fit: cover;
}
svg {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
画面全体に svg が重なるようにプロパティを指定します。
svg を透過させると、重なっているのがわかります。
マスキング
<div class="content content-1">
<video src="a.mp4"></video>
<svg>
<rect x="0" y="0" width="100%" height="100%" fill="gray" />
<mask id="mask" x="0" y="0" width="100%" height="100%"></mask>
</svg>
</div>
mask 要素に id=mask を指定します。
svg>rect {
-webkit-mask: url(#mask);
mask: url(#mask);
}
背景と重なっている四角形の rect 要素に mask プロパティで mask の id を指定します。
重なっていた 四角形 にマスキングが適用され、背景の画像が見える状態になります。
背景を隠す
mask 要素の中に 図形 や path を配置して、マスキングします。
fill 塗りつぶしの色が、白だと非表示、黒だと表示されます。
<div class="content content-1">
<video src="a.mp4"></video>
<svg>
<rect x="0" y="0" width="100%" height="100%" fill="gray" />
<mask id="mask" x="0" y="0" width="100%" height="100%">
<rect x="0" y="0" width="100%" height="100%" fill="white" />
<text x="50%" y="10%" text-anchor="middle" dominant-baseline="central" fill="black">SECTION</text>
<circle cx="50%" cy="50%" r="250" fill="black" style="opacity: .2;" />
</mask>
</svg>
</div>
6: fill=”white” 白色の四角形を全体に配置して、背景全部を非表示にします。
7: テキスト要素 fill=”black” 黒に塗りつぶすことで、背景を表示します。
8: 円要素 opacity で透過させることも出来ます。
テキストの形に背景が表示、円の形に opacity: .2 で透過された背景が表示出来ました。
マスキングの色を変える
<div class="content content-1">
<video src="a.mp4"></video>
<svg>
<rect x="0" y="0" width="100%" height="100%" fill="white" />
<mask id="mask" x="0" y="0" width="100%" height="100%">
<rect x="0" y="0" width="100%" height="100%" fill="white" />
<text x="50%" y="10%" text-anchor="middle" dominant-baseline="central" fill="black">SECTION</text>
<circle cx="50%" cy="50%" r="250" fill="black" style="opacity: .2;" />
</mask>
</svg>
</div>
4: 最初に背景と重ね合わせた、svg の四角形の fill 塗りつぶしの色を変更することで、マスキングの色を変更することが出来ます。
マスキングの色を変更することが出来ました。
以上mask を使って画像・動画を切り取る方法でした。
HTML × CSS background-clip で背景をテキストで切り取る
2023年01月10日
Css全体のコード
<section>
<div class="container">
<div class="content content-1">
<video src="a.mp4"></video>
<svg>
<rect x="0" y="0" width="100%" height="100%" fill="white" />
<mask id="mask" x="0" y="0" width="100%" height="100%">
<rect x="0" y="0" width="100%" height="100%" fill="white" />
<text x="50%" y="10%" text-anchor="middle" dominant-baseline="central"
fill="black">SECTION</text>
<circle cx="50%" cy="50%" r="250" fill="black" style="opacity: .2;" />
</mask>
</svg>
</div>
</mask>
</div>
</section>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box
}
/*=== Font ratio ===*/
html {
scroll-behavior: smooth;
font-size: 62.5%;
}
body {
font-size: 1.6rem;
}
@media screen and (max-width: 768px) {
html {
font-size: 58.5%;
/* 15px */
/* font-size: 54.6%; 14px */
}
}
.content {
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
video {
width: 100%;
height: 100%;
object-fit: cover;
}
svg {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
svg text {
font-weight: 700;
text-transform: uppercase;
font-size: 100px;
}
svg>rect {
-webkit-mask: url(#mask);
mask: url(#mask);
}
</style>