CSS_遮罩層overlay效果

本文总阅读量次

使用overlay通常是要上層壓字，使文字能更清楚呈現，下圖為遮罩效果的差異

範例圖樣

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<section id="video-play">
  <div class="dark-overlay"> <!-- 背景暗色 -->
    <div class="row">
      <div class="col">
        <div class="container p-5"><!-- padding -->
          <a href="#" class="video" data-video="https://www.youtube.com/embed/SjJ08V166uU" data-toggle="modal" data-target="#videoModal">
            <i class="fas fa-play fa-3x"></i><!--data-toggle 通常會伴隨一個icon，告知系統在點擊後會觸發另一個行動 -->
          </a>
          <h1>Watch Our Publicity Film</h1>
        </div>
      </div>
    </div>
  </div>
</section>

設定CSS條件

  • 調整背景的opacity透明度
  • 透過相對、絕對定位調整遮罩位置，重疊
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
#video-play {
  position: relative;
  min-height: 200px;
  background: url('../img/Video.jpg');
  background-attachment: fixed;
  background-repeat: no-repeat;
  text-align: center;
  color: #fff;
}


.dark-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7); //透明度
}

實作Demo: 體育新聞網站