Result
SVG等を使わず、純粋にCSSだけで白抜き文字を作る、みたいなやつ
縁取りだけならtext-shadowやtext-strokeで済みますが上のデモのような白抜き文字だとSVGが主流になっていると思います
SVGが使えないケースはblend-modeより少ないと思いますが選択肢があると良いなという事で
メリットはコード書くのが楽、デメリットはblend-modeな点でしょうか
css
.label {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
padding: 8px 25px;
border-radius: 35px;
font-size:2.5rem;
font-weight: bold;
}
.label.style {
background: #fff;
color: #000;
mix-blend-mode: screen;
}逆に黒背景等で文字をくり抜くならmix-blend-mode: multiply;にして文字色をホワイトにすると良いと思います
いずれにしてもSVGほど応用は効きません
html
<div class="parent">
<div class="label style">サンプルです</div>
<img src="foo.jpg">
</div>
</div>コードが少なく済む分、パフォーマンスは少し良くなるかも。
※ベンチマークとったわけではないので適当に聞き流してください
can i use
blend-modeのブラウザ対応状況です。IE無視でいいならSVGでもblend-modeでも良いかもしれない。