CSS note

background clip

ブラウザがサポートしていないかもしれません。

HTML

<div class="background-clip">
Hello World
</div>

CSS

.entry-content .background-clip{
 font-size: 120px;
 text-align: center;
 font-weight:800;
 -webkit-background-clip: text;
 background-image: url("https://tenman.info/labo/css/files/cropped-header-sky.jpg");
 color: transparent;
}

関連

Can I use...

Mix blend mode

HTML

<div class="wrapper">
<img src="https://tenman.info/labo/css/files/blur-header-1.jpg" alt="test image" />
<p class="google-font-bitter700">Hello World</p>
</div>

CSS

.wrapper{
 position:relative;
 width:100%;
 height:300px;
 margin-bottom:300px;
}
.wrapper img, .wrapper p{
 position:absolute;
}
.wrapper p{
 mix-blend-mode : overlay;
 color:#fff;
 font-size:100px;
 left:1em;
 text-shadow: 2px 2px 4px #000000;
}

関連

Can I use...mix-blend-mode

mix-blend-mode

新着記事