■CSSフィルターで簡単画像変換(8):不透明度(opacity)

 CSS(Cascading Style Sheets)のフィルター機能を使用すると、カラー画像に対して容易に下記に示す各種変換を施すことができます。

(1)blur(ぼかし)
(2)brightness(明度)
(3)contrast(コントラスト)
(4)drop-shadow(ドロップシャドウ)
(5)grayscale(グレースケール)
(6)hue-rotate(色相環)
(7)invert(階調の反転)
(8)opacity(不透明度)
(9)saturate(彩度)
(10)sepia(セピア)

 ここでは、(8)の不透明度(opacity)の例を示します。

 ・使用フィルター: {filter: opacity(50%)}、 {filter: opacity(20%)}
    引数の説明: 不透明度、0が最も透明(見えなくなる)、1が最も不透明(未指定と同じ状態)に

 (元画像)
     


ホーム