【CSS】指定した場所に透過した背景画像を表示させる方法

ブログと事務所のホームページをWordPressで自作している京都の税理士・びとうです。

前回の記事でも紹介したように、先日、ホームページのテーマをTHE THOR（ザ・トール）に変えました。
前回の記事THE THOR（ザ・トール）でホームページをリニューアル。ストークから変えた理由あれこれ

そのついでに、昨日から、トップページに載せている「代表税理士（＝ワタクシ）からのごあいさつ」の見た目を↓こんな感じに変えてみました。

ごあいさつ文の背景に透過した写真を表示させています。

ちなみに変える前の見た目は↓こんな感じ。

…いかにも「ザ・手作り」でしょ(^^;
これで、ホームページを見ていただく方の第一印象も良くなるハズ！（と期待します）

で、今回、コレに変えたのがテーマ変更直後だったので、

THE THORにしたらこんなんもできるん？？

と思う人が出てくるかもしれないなー、と思ったので、
「そうじゃないですよ」
ということをお伝えするためにひと記事書いてみます。

実は、上の表示はCSSの指定だけでできちゃいます。
つまり、どのテーマでも同じことができちゃうので、「これいいなー」と思った人は参考にしてみてください(^^

以下の内容はWordPressの文字入力をテキストエディタで行なっていることが前提です。
ビジュアルリッチエディタでは使えませんので、テキストエディタに切り替えて使用してください。

この記事の目次

2つの要素を使って「透過しているように」見せています
- div要素ごとにバラしてみると？
- div要素を2つ使うのがミソ（1つではダメ）
まとめ　いろんなパターンを試してみてください

2つの要素を使って「透過しているように」見せています

前置きが長くなったので、さっそく結論から。
上の表示にするために私が実際に記述しているソースコードを↓載せちゃいます。
（タテヨコに長くなることもあり、実際の文章や画像のパスは省いています。）

<div style="background: url(https://~/1.jpg) no-repeat bottom right;background-size: contain;text-shadow: 1px 1px 1px #ffffff;">
<div style="background-color: rgba(255,255,255,0.2);padding-bottom: 1.5em;">
 
ここに載せたい文章を入れる
 
</div>
</div>

2つのdiv要素で文章を囲うことで、
文章が表示されているスペースの背後に透過した画像を表示させています。

div要素ごとにバラしてみると？

上のソースをdiv要素ごとにバラしてみましょう。

まずは外側（1行目と7行目）の↓この部分です。

<div style="background: url(画像のURL) no-repeat bottom right;background-size: contain;text-shadow: 1px 1px 1px #ffffff;">

</div>

こちらでは

background：背景について
- こんな画像を表示させたい
  「url(https://~/1.jpg)」の部分に画像のアドレスを入力。
  （絶対パス（http〜で始まるアドレス）でも相対パスでもどちらでもOKです）
- 表示方法
  「no-repeat」で繰り返し表示を防止。何も指定しなければ繰り返し表示されます。
- 場所
  「bottom right」と入れることで右下隅に表示させる。
  center、top、bottom、left、rightが指定可能。
background-size：背景に表示させる画像の大きさ
「contain」で画像のタテヨコ比をキープしたまま文章が表示されているスペース内に収めてくれます。
（＝画像のタテヨコの長い方が収まるように表示してくれる。短い方に合わせたサイズで全体を表示させたい場合は「cover」と指定。）
text-shadow：本文に影を付ける
画像と文章が重なっても文字が読めるように。白色（カラーコード：#ffffff）を設定。

この3つを指定しています。

そして、内側（2行目〜6行目）の↓この部分。

<div style="background-color: rgba(255,255,255,0.2);padding-bottom: 1.5em;">

ここに載せたい文章を入れる

</div>

こちらでは、

background-color：背景色を指定
「rgba()」でこのdiv要素の背景色に透明度を持たせることができます。
「255.255.255」は白色のカラーコードなので、これを使うことにより、画像が表示してある外側のdiv要素に対して白色のフィルターをかけているイメージ。
カラーコード（255,255,255）のあとの0.2の数値を1に近づけるほど白色が濃くなる＝フィルター効果が増します。
padding-bottom：文末の余白部分の指定（今回のネタとの関連性は無し）
文章の下に適切なスペースを設けるために指定。

この2つを指定しています。

つまり、

外側の要素で背景画像を表示させつつ
内側の要素でその上から白くて薄いフィルターをかけている

という仕組みです。
イメージにすると↓こんな感じですね！

「もっとうまいコードの書き方があるぞ！（特に外側の要素は！）」なんて声もあるかもですが、そこは素人ということでご容赦ください(^^;
（background-sizeもbackgroundの中に入れたかったんですけど、私の環境では（？）なぜかうまくいかず…。）

div要素を2つ使うのがミソ（1つではダメ）

実はワタクシ、コレ（2つのdiv要素を使う）に行き着くまでに一度失敗をしています。
というのも、CSSには「opacity」という、表示されているものを透過させるプロパティがありまして。

opacityを使えばカンタンに透過させられるんちゃうん？

と考えて、最初は↓こんなコードを書いてみました。

<div style="opacity: 0.8;background: url(https://~/1.jpg) no-repeat bottom right;background-size: contain;text-shadow: 1px 1px 1px #ffffff;">
 
ここに載せたい文章を入れる
 
</div>

使っているdiv要素は1つだけで、スタイル指定の頭に「opacity: 0.8;」と入れることで、全体を20％透過させるようにしました。
ただ、これだと、囲っている要素全体が20％透過されてしまうので、背景の画像だけでなく、中の文字まで薄くなっちゃうんですね。

こらアカンわ…(^^;

ということで、いろいろ調べた結果「内側にもう1つフィルター要素を加える」という方法に行き着きました。
（というか、ちょっと検索したら同じやり方がバンバン出てきます。~~なんで、この記事も検索需要はあてにしてません~~）