daysWebLifeMusicAboutContactホームWebCSSだけで画像を暗くする方法【画像加工する時間を節約】Web2019.02.14こんにちは。Webデザイナーのけんです。画像に文字を乗せた時に、見づらいから画像を少し暗くしたい時ってありますよね。画像が明るすぎるので暗くして雰囲気を出したいなんて時も。画像編集ソフトで加工してまたアップロードし直すのとかけっこうめんどくさいですよね。画像そのものを編集することなく、CSSだけで画像を暗くすることは可能です。今回は用途に分けて、2つの方法を紹介します。シンプルに画像を暗くしたい時はこの方法を使いましょう。画像の上にテキストをのせる場合は、この方法はおすすめできません。理由は次章で説明します。0.7;}手順は以下の通り。imgタグをかこむ親要素を作ります。ここではdivタグを使用。#000000;を指定します。imgタグにopacityを指定。opacityは透明度を指定するプロパティです。画像を半透明にし、後ろの黒背景が透けて見えることで画像が暗くなるということです。元の画像と比較してみましょう。CodePen.プレビューの上の画像が暗くする前の実際の画像です。下の画像はCSSの記述によって暗くなっています。2背景画像をCSSだけで暗くする方法imgタグで表示させた画像よりも、backgroundで背景として表示させた画像を暗くしたいという時の方が多いと思います。前章「1.CSSだけで一番簡単に画像を暗くする方法」のやり方でも背景画像を暗くすることは可能ですが、中のテキストなども一緒に暗くなってしまうという欠点があります。背景画像の上にテキストを乗せる場合は、中の要素はそのままに、背景画像だけ暗くするテクニックを使いましょう。<h1>夏は、海に行こう。CodePen.かんたんに説明すると、黒い半透明のフィルターを上に重ねているイメージです。解説(詳しく知りたい人向け)どういうしくみになっているか分けて解説します。くわしく知りたい人だけ見てみてください。/*中の要素の基準値*/}まずは背景画像を表示させ、paddingで高さを確保します。relative;を指定し、中に入れる要素の基準値とします。0.5);で黒い半透明のフィルターを背景画像の上にかぶせます。最後の0.5という数字を上げればさらに暗く、下げれば暗さが薄まります。rgbaは、色と透明度を一緒に指定できる記述方法です。下記コードと同じ指定になります。absolute;を指定し、top、bottom、left、rightを全て0に指定します。これを指定すると、フィルターが全体に広がり、背景画像を覆います。absolute;を指定することで中の要素が浮きます。それによって、さきほどかけたフィルターの影響を受けないというしくみです。relative;でもOK。まとめCSSで画像を暗くする2つの方法を紹介しました。状況によって使い分けてください。画像を暗くしたい主な理由は、画像にテキストをのせた時の視認性を上げたいとかだと思うので、中の要素が影響を受けない背景画像だけ暗くする方法の方が使用頻度が高そうですね。Awesomeで超簡単にWebサイトにアイコンを表示する。導入から使い方まで丁寧に解説。Webでは、自分で作成したり調達せずとも無料で利用できる素材がたくさんあります。Webアイコンフォントもその一つです。Awesomeの導入手順と使い方をまとめました。送信完了ページを表示する方法【WordPress】こんにちは、けんです。僕も、自分のサイト運営はもちろん、受注したWebサイト制作...2018.12.13Webブログを始める人におすすめのレンタルサーバー3選こんにちは。これからブログを始める人におすすめのレンタルサーバーを紹介します。レンタルサーバーについての記事はたくさんありますが、網羅的にレンタルサーバーをまとめていたりするので、選択肢が多すぎます。...2018.12.02Webシンプルで使いやすいエディタ「Brackets」のインストール方法【初心者におすすめ】こんにちは。Webデザイナーのけんです。コードを書くのにテキストエディタは必須です。初学者の方が「どのエディタを使えばいいかわからない...」と悩んでいるなら、Bracketsをおすすめします。...2019.03.10Web【bootstrap3】グリッドシステムのボックスの高さをCSSだけで揃える。