內容遮罩
可淡化背景並強調特定主體的遮蔽元素。
範例
明暗色系
遵循使用者設定
遵循使用者設定
亮色
暗色
縮放
標準
放大
標準
縮小
<div class="ts-image" style="max-width: 450px;">
    <img src="image.png">
    <div class="ts-mask">
        <div class="ts-center">
            <div class="ts-loading is-large" style="color: #FFF"></div>
        </div>
    </div>
</div>
概要

遮罩預設會是覆蓋整個父容器的大小,但也可以指定只遮蔽某半部份。妥善地與內容區塊搭配可以更改內容文字的對齊位置。

外觀
半部的

遮罩可以處於父容器的上、中、下部份。

置上遮罩
然後這裡會放一段文字。
置中遮罩
然後這裡會放一段文字。
置底遮罩
然後這裡會放一段文字。
<div class="ts-image" style="max-width: 450px;">
    <img src="image.png">
    <div class="ts-mask is-top">
        <div class="ts-content" style="color: #FFF;">
            <div class="ts-header">置上遮罩</div>
            然後這裡會放一段文字。
        </div>
    </div>
</div>
<div class="ts-image" style="max-width: 450px;">
    <img src="image.png">
    <div class="ts-mask is-middle">
        <div class="ts-content" style="color: #FFF;">
            <div class="ts-header">置中遮罩</div>
            然後這裡會放一段文字。
        </div>
    </div>
</div>
<div class="ts-image" style="max-width: 450px;">
    <img src="image.png">
    <div class="ts-mask is-bottom">
        <div class="ts-content" style="color: #FFF;">
            <div class="ts-header">置底遮罩</div>
            然後這裡會放一段文字。
        </div>
    </div>
</div>
淡化的

遮罩可以處於父容器的上、中、下部份。

置上遮罩
然後這裡會放一段文字。
置底遮罩
然後這裡會放一段文字。
<div class="ts-image" style="max-width: 450px;">
    <img src="image.png">
    <div class="ts-mask is-faded is-top">
        <div class="ts-content" style="color: #FFF;">
            <div class="ts-header">置上遮罩</div>
            然後這裡會放一段文字。
        </div>
    </div>
</div>
<div class="ts-image" style="max-width: 450px;">
    <img src="image.png">
    <div class="ts-mask is-faded is-bottom">
        <div class="ts-content" style="color: #FFF;">
            <div class="ts-header">置底遮罩</div>
            然後這裡會放一段文字。
        </div>
    </div>
</div>
次要的

沒有背景的遮罩會顯得不重要,但可以用來呈現內容在某些物件上。

限時特價
現在購買這個蛋糕只需要新台幣 3,000 元!
<div class="ts-image" style="max-width: 450px;">
    <img src="image.png">
    <div class="ts-mask is-secondary is-bottom">
        <div class="ts-content" style="color: #333;">
            <div class="ts-header">限時特價</div>
            現在購買這個蛋糕只需要新台幣 3,000 元!
        </div>
    </div>
</div>
模糊的

被遮蔽的內容能夠以模糊化處理。

<div class="ts-image" style="max-width: 450px;">
    <img src="image.png">
    <div class="ts-mask is-blurring"></div>
</div>
組合應用
關閉按鈕

透過搭配遮罩與關閉按鈕可以讓圖片的右上角有個常見的移除、關閉動作。

<div class="ts-image is-small is-rounded">
    <img src="image.png">
    <div class="ts-mask is-secondary is-top">
        <div class="ts-content is-compact is-end-aligned" style="line-height: 1;">
            <button class="ts-close"></button>
        </div>
    </div>
</div>
附屬資訊

圖片的右下角可以擺放時間或是檔案大小。

32 KB
<div class="ts-image is-small is-rounded">
    <img src="image.png">
    <div class="ts-mask is-secondary is-bottom">
        <div class="ts-content is-compact is-end-aligned">
            <div class="ts-badge">32 KB</div>
        </div>
    </div>
</div>
由來自 台灣的 Yami Odymel 所設計,當然還有貢獻者們的愛心❤️。原始碼授權方式為 MIT,文件則為 CC 0 公眾領域。還請盡情地使用、分享或一同改進。Tocas UI 是卡莉絲伊繁星的設計語言,而卡莉絲伊繁星屬對空音商事
台灣正體語系協作者:Yami Odymel、coin3x、Sea-n