画像にフィルターをかけるときは、CSSのスタイル指定がラクですよ。Photoshopなどを使うと、ソフトを起動したり、元データを残しつつ加工したりと時間がかかるもの。
今回はIEとIE以外のブラウザに分けた形でご紹介します。IEは「opacity」と「background-color」で、IE以外なら「filter」で加工していきます。
「ぼかし」や「影」などのフィルターをつけたいときは、こちらを参考にしてください。
目次
はじめに
対応するブラウザとファイルを確認の上、作業を進めてください。
各サンプルは、画像を一面に広げたデザインとなります。別のコード、スタイルと組み合わせる場合は、構成やクラス名を変更して競合しないようご注意ください。
用意するファイル
下記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
「filter」プロパティにある「brightness」の値で画像の明るさを調整できます。
@charset "utf8";
.img{
width: 100vw;
height: 100vh;
margin: 0 auto;
display: block;
filter: brightness(80%);/*明るさ*/
}
opacity ＋ background-color（IE対応）
はじめに「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
.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（IE対応）
.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%);
}
（背景）画像の上に文字を乗せた場合のフィルター適用は以上です。前面の文字が読みやすくなりましたね。
ちなみに「黒フィルター」で説明してきましたが、どちらの方法も色を変えることができます。「filter」は「hue-rotate（色相）」、「opacity＋background-color」は「背景色」で設定します。
サイトカラーに合わせたり、画像イメージを変えたいときにおすすめです。「filter」については、以下の記事をご覧ください。
