文字は透過せず、背景のみを透過する方法

要素の透明度を指定する際には、「opacity」プロパティを使用する。
透明度は、0.0（完全に透明）～1.0（完全に不透明）の数値で指定していく。

ただ、「opacity」を使った場合は、重なっている文字や子要素まで一緒に(オブジェクト全体が)透過されてしまうため、テキストはそのままの状態で背景だけ個別に透過の指定をしたい場合は、opacityではなくbackground-colorプロパティを使う。
値は「rgba」で指定する。

記述のしかた

background-color : rgba ( 赤、緑、青、透明度 ) ;

RGBの値は、0～255の値を入力する。
透明度には、0～1 (0＝透明 / 1＝不透明)の値を入力する。

文字をカスタマイズする際に参考になる記事

PICK UP

注目記事セレクション

photoshopで画像をきれいに切り抜く方法「境界線を調整」
切り抜きの方法は色々ある中で、ＣＳ５から追加された「境界線を調整」という機能を使うと、切り抜きたい部分の境界線が複雑なものでもかなり正確に切り抜くことができます。

【TIPS】CSSで作るドロップダウンメニューのドロップ表示(5パターン)
CSSで作るドロップダウンメニューのドロップ表示５パターン。コードは、全てのパターンの共通となるhtmlとCSSに加え、パターンごとに個別に設定…

【TIPS】画像ホバーの際アニメーション効果をつけるCSS3
スクリプト不要で、画像ホバー時にＣＳＳ３アニメーションで様々なキャプション表示ができるスタイルシート10パターンのまとめ。

【TIPS】画像ホバーの際アニメーション効果をつけるCSS3 – ihover –
スクリプト不要で、画像ホバー時にＣＳＳ３アニメーションで様々なキャプションを表示するスタイルシート６パターン。

【TIPS｜ズームスライダー】高速スライド&ズーム表示の画面遷移がインパクト大！
アニメーションしながらスライダー&ズーム表示する「ズームスライダー」。

One thought on “文字は透過せず、背景のみを透過する方法”