背景画像を文字で切り抜くCSS作成

<div class="imgText2>
  <div class="bgText2></div>
  <div class="Text2>文字<br>切り抜き</div>
</div>

<style type="text/css">
.imgText2 {                  /* 背景画像のサイズ指定 */
  display:inline-block;
  position:relative;
  width: 100%;
  height: 300px;
  margin:0 auto;
}
.bgText2 {                   /* 背景画像の指定 */
  position:absolute;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-image: url(https://webparts.cman.jp/image/shizen550.jpg);
}
.bgText2::before {           /* 背景の色指定 */
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  content: '';
  background-color: #00ffff; /* 背景の色 */
  opacity: .4;               /* 透明度 */
}
.Text2 {                     /* 画像を文字で切り抜く指定 */
  position:absolute;
  width: 100%;
  height: 300px;
  font-size: 100px;
  font-weight: bold;
  background-size: cover;
  background-position: center;
  background-image: url(https://webparts.cman.jp/image/shizen550.jpg);
  -webkit-background-clip: text;
  color: rgba(0, 0, 255, 0.3); /* 文字の色指定 */
}
</style>

<div class="Text3"><p>文字切り抜き</p></div>

<style type="text/css">
.Text3 {                /* 全体背景の指定 */
  padding: 10px 0;
  background: linear-gradient(#0000ff 50%, #00ffff 50%);
}
.Text3 p {              /* 文字の切り抜き指定 */
  font-size: 80px;
  font-weight: bold;
  margin:10px 0;
  position: relative;
  display: inline-block;
  background: linear-gradient(#00ffff 50%, #0000ff 50%);
  -webkit-background-clip: text;
  color: transparent;
}
</style>