CSSでマスクをかけよう！

今日はCSSでマスクをかける方法を3つ紹介します。

①mask-imageプロパティー
②clip-pathプロパティー
③background-clipプロパティー

mask-image

<div>
  <img src="https://drive.google.com/uc?export=view&id=1Sfq6fhwbdIQ4hThtOmuhSfstohOMVDg0">
</div>

div {
  width: 500px;
  height: 500px;
  overflow: hidden;
  display: block;
  position: relative;
}

img {
  mask-image: url("https://drive.google.com/uc?export=view&id=1oUK2ZZNIJRh7_Zv2jV3WcsKp7-btSuka");
  mask-repeat: no-repeat;
  mask-position: 0 0;
  mask-size: 100%;
  display: block;
  width: 100%;
  /* Chrome, Safari用 */
  -webkit-mask-image: url("https://drive.google.com/uc?export=view&id=1oUK2ZZNIJRh7_Zv2jV3WcsKp7-btSuka");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: 0 0;
  -webkit-mask-size: 100%;
}

clip-path

See the Pen
CSSでマスクをかける by sayuri (@giraffeweb)
on CodePen.0

<div class="clip-path">
  <img src="https://drive.google.com/uc?export=view&id=1Sfq6fhwbdIQ4hThtOmuhSfstohOMVDg0">
</div>

div {
  width: 400px;
  height: 300px;
  display: block;
}

.clip-path {
  clip-path: inset(10px round 60px);
}

background-clip

See the Pen
CSSでマスクをかける2 by sayuri (@giraffeweb)
on CodePen.0

<div>
  <p>TEST</p>
</div>

div {
  width: 800px;
  background-color: #fff;
  text-align: center;
}

p {
  background-image: url(&quot;https://drive.google.com/uc?export=view&amp;id=1Sfq6fhwbdIQ4hThtOmuhSfstohOMVDg0&quot;);
  font-size: 14vw;
  font-weight: bold;
  background-clip: text;
  -webkit-background-clip: text;
  margin: 0;
  color: transparent;
}
Share: