[解決済み] CSSでテキストや画像の背景を透明にするには?
2022-03-15 02:31:53
質問
CSSのみを使って
background
は半透明で、中身(テキストや画像)は不透明なのでしょうか?
テキストと背景を別々の要素にすることなく実現したいのですが。
試してみると
p {
position: absolute;
background-color: green;
filter: alpha(opacity=60);
opacity: 0.6;
}
span {
color: white;
filter: alpha(opacity=100);
opacity: 1;
}
<p>
<span>Hello world</span>
</p>
子要素は親の不透明度が適用されるようなので
opacity:1
は相対的なものであり
opacity:0.6
を親とする。
解決方法は?
半透明の PNG または SVG の画像を表示するか、CSSを使用します。
background-color: rgba(255, 0, 0, 0.5);
css3.infoの記事を紹介します。 不透明度、RGBA、妥協点 (2007-06-03).
<p style="background-color: rgba(255, 0, 0, 0.5);">
<span>Hello, World!</span>
</p>
関連
-
[解決済み] input type="file "ボタンのスタイリング
-
[解決済み] HTML 5: Is it <br>, <br/>, or <br />?
-
[解決済み] 画像の横のテキストを縦に揃える?
-
[解決済み] CSSの三角形はどのように機能するのですか?
-
[解決済み] div' コンテナに合わせて画像を自動リサイズするにはどうしたらいいですか?
-
[解決済み] divブロック内のテキストを(水平方向と垂直方向に)センタリングするにはどうすればよいですか?
-
[解決済み] 複数のノンブレイキングスペース("nbsp")ではなく、タブスペースを使用しますか?
-
[解決済み] CSS画像を背景で伸縮させる - CSSのみで可能
-
[解決済み] HTMLのid属性とname属性の違い
-
[解決済み] Do I use <img>, <object>, or <embed> for SVG files?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] リンクのように動作するHTMLボタンを作成する方法
-
[解決済み] XHTMLの自己完結型タグを除くオープンタグにマッチするRegEx
-
[解決済み] How do I style a <select> dropdown with only CSS?
-
[解決済み] 複数のノンブレイキングスペース("nbsp")ではなく、タブスペースを使用しますか?
-
[解決済み] CSSの不透明度は背景色にのみ適用され、その上のテキストには適用されない?重複
-
[解決済み] CSS 背景の不透明度 [重複]について
-
[解決済み] Webサイトのブラウザタブアイコン(ファビコン)を追加する方法を教えてください。
-
[解決済み] Do I use <img>, <object>, or <embed> for SVG files?
-
[解決済み] CSSでdivを縦にスクロールできるようにする
-
[解決済み] 背景色の不透明度、テキストの不透明度 [重複]について