opacityで背景だけ透過させて文字は透過させないCSSの書き方の紹介

自己紹介

1984年生まれの40歳、オンラインビジネスの仕事をしている河島靖です。
以前までWEB制作・イベント制作業などの受託ビジネスをしてきましたが、仕事も時間も自分でコントロールできないことが大きな悩みでした。
現在は自分でコントロールできるオリジナルコンテンツでのビジネスをメインにし、現在も絶賛チャレンジ中です。
事業としてはブログアフィリエイト・Amazonでの輸入販売・AmazonでのオリジナルOEM商品販売・Kindle書籍出版・ファンクラブ運営などを行っています。
今後はSEOに頼らないオンラインでの教育コース開発やマーケティングファネルを使ったビジネスを構築したく活動しています。メルマガでも情報発信しています。

CSSでopacityを使った透過の方法を2種類記します。

本記事の目次

透過なし

See the Pen MGxLJJ by kawashima (@kawashima) on CodePen.

これは透過してない状態。

タンメン画像の上に青い背景と文字があります。

文字も背景も透過

See the Pen erXxMe by kawashima (@kawashima) on CodePen.

手っ取り早くopacityを使用すると文字も透過しちゃいます!

文字はそのままにしたい場合は下をご参照下さい。

背景だけ透過。文字は透けない。

See the Pen erXxre by kawashima (@kawashima) on CodePen.

色指定する際にrgba(0,0,255,0.7)の形式で色と透過の数値を指定しましょう。

これで文字はそのままで背景が透けます。

当ブログサイトはWordPressテーマ「SWELL」で作られています。
初心者でも更新しやすく、SEOに強いシンプルなデザインテーマです。

SWELL公式のデモサイトを見てみる

コメントはこちら

コメントする

本記事の目次