
ブログやるなら SWELL × ConoHa WING がおすすめ!ルイログはこの構成で運営しています

ルイログも愛用中!
背景に画像を設定して、その上にテキストを乗せるというデザインを作る際、背景画像が派手だったり鮮やかだったりするとなかなかテキストが見づらいですよね。
そういうとき、画像を暗くしないと・・・となりませんか?
いえいえ。そこで良い方法があります。
画像編集をせずとも、画像はそのままにCSSだけで画像を暗くする方法を紹介します!
ガジェットブロガー
R.U.I
プロフィール
ガジェットやモノで生活に刺激を「ルイログ」。当サイトではAppleデバイスやその周辺機器、使えるソフト・アプリ、さまざまなガジェットや生活家電・モノをレビューしています。他にもWEBをデザインのコピペで簡単に使えるコードを紹介したりも。WEBエンジニアの方やPCが趣味・PCを使って仕事をしている方にとって役立つ情報を発信しています。カメラ・写真が好きなのでレビュー商品も写真を多め撮影し掲載することでより商品の魅力や細かいが伝わるよう心がけています。 プロフィール詳細やレビューガイドライン
使うものは、「background-color: rgba(0,0,0,.7);」のような CSS です。
背景色を真っ黒にし、透明度を設定し、「position: absolute;」にてその背景色を画像よりも上にもってきて画像を暗くするという作り方です。
背景を暗くする前
これだと、文字が全然見えないですよね。
背景を暗くしてみましょう。
暗くするととても見やすくなりました!
これを実現する HTML / CSS コードの紹介をしていきましょう。
まず、HTMLはシンプルに。
<div class="contents-frame">
<p class="text-zone">テキストをここに入力</p>
</div>
CSSはこちら。
.contents-frame {
background-attachment: fixed;
background-image: url(画像URL);
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
width: 100%;
height:100vh;
/*中に入るもの(テキスト)を縦横中央に配置*/
display: flex;
align-items: center;
justify-content: center;
}
.contents-frame::before {
content: '';
background-color: rgba(0,0,0,.7);
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
/*テキストを大きく、白い太文字に*/
.contents-frame .text-zone{
position:absolute;
font-size:2.8rem;
color:#fff;
font-weight:bold;
}
少し解説の文字も入れてみました。
「background-color: rgba(0,0,0,.7);」で背景色を黒くして透明度の指定を70%(透明度30%)に、「position: absolute;」〜で背景を画像の上&配置する形です。
上に乗せる文字は背景画像を暗くしているので「.text-zone」にて白文字・太文字・大きめにしました。
知っているのと知らないのではかなり違う、とても便利なテクニックを紹介しました。
以前ルイログが使わせていただいていた WordPressテーマにも、タイトル箇所に使われていました。少しだけ暗くする(.25)設定でしたね。
今回のコピペで使えるCSSコードは画面いっぱいに画像を置くときのもので用意しましたが、利用用途によっては必要箇所を変更してください。
画像を暗くするというところでいうと「 rgba(0,0,0,.7); 」の”.7″のところが重要で、微調整すれば暗さ(黒の透明度)も変えられます。
1で真っ黒、0で透明
なので、CSSコードを複数用意しておいて画像によって暗さを変えたりなんてことも容易にできます。
EC系のショッピングサイトだと、「商品画像をを暗くして上に完売御礼!の文字を乗せる」が完売した商品に対する class 指定 1つで容易にできる感じです。
画像加工し直さなくても良いってめっちゃ便利だね!?
是非使ってみてください!
合わせて使うと超便利な CSSだけで画像をぼかす方法 はこちら。
応用技として、CSSだけで画像を暗くしてぼかす場合はこちらをチェック!
良きWEBデザインをっ!
この記事が気に入ったら
フォローしてね!