F2E合作社｜圖文滿版區塊

前言

不論網頁或平面設計都很常出現此種構圖，而利用 CSS 的 linear-gradient 與多重背景就可以輕鬆做到。（對於線性漸層和多重背景，若有不懂的話可以看看 CSS保健室｜background ）

CSS

<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC&display=swap" rel="stylesheet">
<style type="text/css">
    * {
        margin: 0;
        padding: 0;
        list-style: none;
        font-family: 'Noto Sans TC', sans-serif;
    }
    .banner {
        width: 100%;
        height: 700px;
        background-color: #ccc;
        background: 
            -webkit-linear-gradient(335deg, #7bf 50%, transparent 50%) center center / 100% 100%, 
            url('https://picsum.photos/1200/600?random=10') right center / auto 100%;
        background: 
            -webkit-gradient(335deg, #7bf 50%, transparent 50%) center center / 100% 100%, 
            url('https://picsum.photos/1200/600?random=10') right center / auto 100%;
        background: 
            -moz-linear-gradient(335deg, #7bf 50%, transparent 50%) center center / 100% 100%, 
            url('https://picsum.photos/1200/600?random=10') right center / auto 100%;
        background: 
            -o-linear-gradient(335deg, #7bf 50%, transparent 50%) center center / 100% 100%, 
            url('https://picsum.photos/1200/600?random=10') right center / auto 100%;
        background: 
            linear-gradient(115deg, #7bf 50%, transparent 50%) center center / 100% 100%, 
            url('https://picsum.photos/1200/600?random=10') right center / auto 100%;
    }
    .container {
        width: 100%;
        max-width: 1440px;
        height: 100%;
        margin: auto;
    }
    .banner-txt {
        height: 100%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start;
    }
    .banner-txt h1 {
        font-size: 80px;
        border-bottom: 1px solid #333;
        font-weight: 900;
        padding-bottom: .3em;
        margin-bottom: .3em;
    }
    .banner-txt h1 small {
        display: block;
        font-size: 53px;
        font-weight: 700;
    }
    .banner-txt h2 {
        font-size: 50px;
        font-weight: 700;
    }
    .banner-txt p {
        font-size: 20px;
        font-weight: 300;
    }
</style>

HTML

<div class="banner">
    <div class="container">
        <div class="banner-txt">
            <h1>金魚都能懂的<small>這個網頁畫面怎麼切</small></h1>
            <h2>圖文滿版區塊</h2>
            <p>這畫面實在常見，在各種樣版網站可說是設計常客<br>金魚切不出來實在說不過去阿</p>
        </div>
    </div>
</div>

最後奉上 CSScoke 的影片教學