不無聊的前端切版課：第4章── 好看的hero section

超好看的穿透文字效果

神奇的一句css

mix-blend-mode

MDN的用法解說

我們的用法就是: mix-blend-mode: screen;

html原始碼寫法

<div class="image-container">
  <div class="text">NATURE</div>
</div>

很簡單就只是兩個div。
一個放圖片，一個寫文字。

CSS原始碼寫法

就很基本，只要把圖片放在背景就可以了。

.image-container {
  background-image: url("img_nature.jpg");
  background-size: cover;
  position: relative;
  height: 300px;
}

.text {
  background-color: white;
  color: black;
  font-size: 10vw; 
  font-weight: bold;
  margin: 0 auto;
  padding: 10px;
  width: 50%;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  mix-blend-mode: screen;
}

心得後記

CSS的世界真的是很大很廣闊，有時候一句關鍵的語法就可以達到很讚的效果！