filter プロパティ …画像やテキストにフィルタの効果を与える

解説

filter プロパティを使えば、要素にフィルタの効果を与えることができます。フィルタを使うと、文字や画像を半透明にしたり、影を付けたり、色を変えて表示させたりすることができます。
値には、フィルタ名を指定し、フィルタ名の後にフィルタの属性と値を指定して、それらをかっこで閉じます。

[ フィルタを複数指定する ] …半角スペースで区切ります。
書式→「filter: フィルタ名(属性=値) フィルタ名(属性=値);」

[ 複数の属性値を指定する ] …カンマ「,」で区切ります。
書式→「filter: フィルタ名(属性=値,属性=値);」

[ メモ ]
filter プロパティを div 要素や span 要素に使用する際には、width プロパティや height プロパティで要素の幅や高さを指定する必要があります。ですが、画像などのように幅や高さが決まっている要素には必要ありません。また、position プロパティで「absolute」を指定した要素に対しても必要ありません。


※ filter プロパティは Internet Explorer 独自のプロパティで、対応していないブラウザで表示すると表示が崩れる場合がありますので注意が必要です。