<div class="flex">
  <!-- 範例一 -->
  <div class="section1">
    GRADIENT
  </div>
  <!-- 範例二 -->
  <div class="section2">
    FLOWER
  </div>

</div>
<!-- 範例三 -->
<div class="section3">
  <div class="mask">
    <div class="text">
      FLOWER
    </div>
  </div>
</div>
@import url("https://fonts.googleapis.com/css2?family=Rubik:wght@900&display=swap");
* {
  font-family: "Rubik";
  margin: 0;
  padding: 0;
}
.flex {
  display: flex;
}
/* 範例一 */
.section1 {
  width: 50vw;
  height: 50vh;
  font-size: 120px;
  line-height: 50vh;
  text-align: center;
  color: transparent; /* 文字顏色設定透明 */
  background-image: linear-gradient(45deg, #F37335, #FDC830 80%); /* 設定漸層角度及顏色 */
  -webkit-background-clip: text; /* 背景裁剪成文字的前景色 */
  background-clip: text;
  border-right: 1px solid #eee;
}
/* 範例二 */
.section2 {
  width: 50vw;
  height: 50vh;
  background-image: url("https://images.unsplash.com/photo-1483519396903-1ef292f4974a");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  font-size: 120px;
  line-height: 50vh;
  text-align: center;
  color: transparent; /* 文字顏色設定透明 */
  -webkit-background-clip: text; /* 背景裁剪成文字的前景色 */
  background-clip: text;
}
/* 範例三 */
.section3 {
  width: 100vw;
  height: 50vh;
  background-image: url("https://images.unsplash.com/photo-1507646871303-331b8f659227");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
.mask {
  background-color: rgba(255, 255, 255, 0.6); /* 白色透明度60% */
  width: 100vw;
  height: 50vh;
}
.text {
  background-image: url("https://images.unsplash.com/photo-1507646871303-331b8f659227");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  font-size: 120px;
  line-height: 50vh;
  text-align: center;
  color: transparent; /* 文字顏色設定透明 */
  -webkit-background-clip: text; /* 背景裁剪成文字的前景色 */
  background-clip: text;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.