EP07 | 跟著影片做前端切版練習 - Background Mix Blend Mode

發表於 更新於 分類於 ， ， ，

練習影片

練習重點

  • background-blend-mode ： 同一個元素中的多張背景圖透過不同的混和模式混和，跟 mix-blend-mode 的混和模式相同，但 mix-blend-mode 是針對多個元素之間的背景顏色去做混和。

結構

HTML

1
2
3
4
5
6
7
<body>
  <section>
    <div class="text">
      <h2>Enjoy<br /> Your Trip</h2>
    </div>
  </section>
</body>

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
section {
width: 100%;
height: 100vh;
/*透過 , 加入多張背景圖片*/
background-image: url(https://images.pexels.com/photos/33046/jet-ski-water-sport-water-bike-water.jpg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940),
  url(https://image.freepik.com/free-vector/hand-drawn-watercolor-splatter-texture-background_1017-26220.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
/*設定多張背景圖片的混和模式*/
background-blend-mode: screen;
display: flex;
align-items: center;
}
.text {
  margin-left: 50px;
}
h2 {
  font-family: "Permanent Marker", cursive;
  text-align: left;
  font-size: 6em;
  color: #035096;
}

@media (max-width: 767px) {
  section {
    background-size: 150%;
  }
}

Demo:

See the Pen EP07 | 跟著影片做前端切版練習 - CSS Background Mix Blend Mode by Celeste6666 (@celeste6666) on CodePen.

Image by starline - www.freepik.com