画像にフィルタをかけるときは、CSSのスタイル指定がラクですよ。Photoshopなどのペイントソフトは元画像を加工することになるため、あまりおすすめできません。
画像の上に文字を置きたいときやサイトカラーに合わせたいときに役立ちます。背景画像にフィルターがかかるとコントラストが出て文字が見やすく、画像の雰囲気も変えることができます。
「ぼかし」や「セピア」などのエフェクトを出したいときは、こちらをご参考にしてください。
目次
はじめに
対応するブラウザとファイルを確認の上、作業をはじめてください。
用意するファイル
下記4ファイルを用意してください。すべて同じ階層にして進めていきます。
- index.html
- style.css
- reset.css（任意）
- sample.jpg（1920×1080以上）
ブラウザ対応
「Can I use」でブラウザの対応状況が分かります。filterに関してはIEの対応がされていないため、全ブラウザで同じ表示にしたい場合はご注意ください。
画像のみ
文字はなく、画像のみの場合はこちらの方法になります。
HTML
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="reset.css"> <link rel="stylesheet" href="style.css"> <title>Document</title> </head> <body> <div class="box"> <img src="sample.jpg" class="img" alt="サンプル画像"> </div> </body> </html>
CSS
filter（IE非対応）
filterプロパティにあるbrightnessの値で画像の明るさを調整できます。
@charset "utf8";
.img{
width: 100vw;
height: 100vh;
margin: 0 auto;
display: block;
filter: brightness(80%);/*明るさ*/
}
opacity ＋ background-color
はじめにopacityで画像を透過します。次に画像を囲むboxに背景色を指定すると透明度によって表側に見えるようになります。フィルタに色をつけたい場合はこちらが便利です。
@charset "utf8";
.box{
background-color: #000000;/*背景色*/
}
.img{
width: 100vw;
height: 100vh;
margin: 0 auto;
display: block;
opacity: 0.8;/*透明度*/
}
画像＋文字
画像の上に文字を置く場合はこちらの方法になります。
HTML
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="reset.css"> <link rel="stylesheet" href="style.css"> <title>Document</title> </head> <body> <div class="box"> <p class="text">Filter</p> <img src="screenshot.jpg" class="img" alt="サンプル画像"> </div> </body> </html>
CSS
filter（IE非対応）
.box{
position: relative;
}
.img{
width: 100vw;
height: 100vh;
margin: 0 auto;
display: block;
filter: brightness(80%);
}
.text{
color: #ffffff;
font-size: 7em;
font-weight: bold;
position: absolute;
z-index: 1;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
背景画像＋文字
背景画像を指定したブロックの上に文字を置く場合はこちらの方法になります。
HTML
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="reset.css"> <link rel="stylesheet" href="style.css"> <title>Document</title> </head> <body> <div class="box"> <p class="text">Filter</p> </div> </body> </html>
CSS
opacity ＋ background-color
.box{
position: relative;
background: url(screenshot.jpg) no-repeat;
background-size: cover;
width: 100vw;
height: 100vh;
}
.box::before{
content: "";
position: absolute;
top: 0;
left: 0;
z-index: 1;
width: 100vw;
height: 100vh;
background-color: #000000;
opacity: 0.3;
}
.text{
color: #ffffff;
font-size: 7em;
font-weight: bold;
position: absolute;
z-index: 2;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
画像と文字の組み合わせごとにフィルターの導入方法を記載しました。単純に明るさを変えたいとき、色を指定したカラーフィルターでイメージを変えたいときなど用途に合わせて選んでくださいね。
各サンプルはトップの1枚画像を想定したスタイルとなります。そのほかのコード、スタイルと組み合わせる場合は構成やクラス名を変更して競合しないようご注意ください。
