画像を透過したい時に使うCSSがopacityプロパティ。

今回実現したかった内容は、特定のボックスエリア内に背景として画像を配置してちょっと透過させたかった。

opacityでやってしまうとそのエリアのテキストや他の画像要素までも透過してしまう。

そこでもう１つの透過方法、rgbaでトライしてみた。

rgbaはred,green,blue,alphaの略である。

そう、最後の値が透明度なのだ。

rgba()内にred,green,blueの値を0～255の数値で設定し、[,]で区切る。

４つ目の値に透過性の値を0～1の間の数値で指定します。0が透明、1が不透明なので小数点を使って0.6とかで。

そうすると、その画像のみを透過させて文字までは透過させずに表現することが出来る。

CSS

#sample-area {
	max-width: 800px; height: 260px; 
	border: solid 3px #414a23; 
	border-radius: 8px; margin: 50px auto; 
	background: url(https://www.hy-creative.com/wp-content/uploads/news-back.jpg) no-repeat top right;
	background-size: contain;
}

.sample-txt {
	height: 215px;
	padding: 30px 15px 15px;
	line-height: 2.2;
	background: rgba(255, 255, 255, 0.6);
}

HTML

<div id="sample-area">
<div class="sample-txt">
花火には、二つしかない。一瞬で消えるか、永遠に残るか。
幼い頃、花火工場の爆発事故で両親を亡くした昇一は、高校卒業後、一人東京で暮らしていた。
ある日、祖父から電話があり、四年ぶりに帰郷する。
そこには花火職人として修行中の風間絢がいた。
十二年前に不幸な出来事が重なった。
それぞれが様々な思いを抱え、苦しみ、悩み、葛藤していく。花火に託された思いとは──。
希望と再生の物語。
</div>
</div>

rgbaの指定についてはネット検索すると自動的に作成してくれるジェネレーターがあるので、そちらを利用すると良いだろう。

例えば以下のサイトなど…

https://hp-html.jp/rgba/

レスポンシブWebデザインが当たり前の昨今は少し大きめの画像を用意することが多いハズ。

ちなみに背景の画像が指定エリアより大きかったりする場合は、サイズの調整はbackground-sizeで調整できる。

これでピッタンコに配置出来た！