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

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)の形式で色と透過の数値を指定しましょう。

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

転職に少し興味ある方へ

転職活動は無料でできるので、いい会社が見つかればラッキーですし、そうでなくても他の会社や業界のことを知れるとてもいい機会になります。

私はこれまで正社員で3社経験してきました。ストレスで辞めたこともあれば面白そうだからと飛び込んだ業界もあります。すべてとてもいい経験になっています。

無料で会員登録できるのでお気軽によかったらどうぞ。

リモートワークに興味ある方はこちら

フルリモートワーク求人に特化した転職サービスです。特別なスキルがなくてもリモートワークできる求人はたくさんあるのでぜひ覗いてみてください。

IT業界の方はこちら

IT系のエンジニア、Webデザイナーの方々向けに特化したエージェント型の転職サービスです。ITエンジニアの支援実績15年もある安定感のある会社です。

女性専門の転職支援サービスはこちら

このブログの半数は女性の方が見に来てくれているので、紹介しようと思いました。女性にしか分からないキャリアや転職の悩み答えてもらえる転職サービスです。

就職先の仕事・待遇・人間関係を知ることが出来る人材紹介サービスで、登録無料で女性のキャリアアップ支援をおこないます。

厳選した私のおすすめ本紹介

僕の人生に役立った本をこちらに紹介しています

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!

コメント

コメントする

目次