iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 6
2
Modern Web

喪屍黑白切系列 第 6

Day 06 | 就是那麼有層次 - 多重背景

今天要來講 金魚都能懂的這個網頁畫面怎麼切: No.001 - 圖文滿版區塊

未來的程式碼範例,前面都會有一個 css reset

* {
  margin: 0;
  padding: 0;
  list-style: none;
  box-sizing: border-box
}

之後就不會特別附註上去,至於為什麼要 reset,
可以看 這個金魚

本篇關鍵字

  • background
  • linear-gradient

範例檔


(背景圖片: Kate Stone Matheson from Unsplash)

HTML

<div class="banner">
  <h2>Zombie@Dump</h2>
</div>

CSS

.banner {
  width: 100%;
  height: 600px;
  background: linear-gradient(15deg, rgba(177, 120, 68, .6) 25%, transparent 25%), 
  linear-gradient(315deg, rgba(177, 120, 68, .6) 30%, transparent 30%),
  url('https://images.unsplash.com/photo-1541781774459-bb2af2f05b55?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1342&q=80')no-repeat center top/cover;
  position: relative;
}

.banner h2 {
  color: white;
  font-size: 50px;
  position: absolute;
  left: 40px;
  bottom: 20px;
}

喪屍分解

  • 使用background 搭配 , 來達成多重背景的設定,要蓋在上面的要寫在前面
    ( 支援度: https://caniuse.com/multibackgrounds )
  • 使用linear-gradient 來達成畫面分割的效果
  • background 有關的 CSS
    background-color
    background-image
    background-position
    background-repeat
    background-size
    background-attachment
    
  • background 簡寫:
    /* background : background-image  background-attachment background-repeat background-position/background-size */
    background: url('logo.png') fixed no-repeat center center/cover;
    
  • linear-gradient 如何用

以上就是今天的內容,如果有講不對的地方再請各位留言讓我知道,謝謝。
明天要講的是如何不使用多重背景。


上一篇
Day 05 | 以前要的不是這種以後?! - ::before, ::after
下一篇
Day 07 | 有沒有別的辦法? - 不使用多重背景
系列文
喪屍黑白切30

尚未有邦友留言

立即登入留言