最近、画像上に半透明の背景でテキストを表示する必要があるという要件に遭遇しました。その効果は次のようになります。 要件.png この要件を確認した後の最初の反応は、CSS3 の不透明度を使用して要素の透明度を設定することです。 <!DOCTYPE html> <html lang="ja"> <ヘッド> <メタ文字セット="UTF-8"> <meta name="viewport" content="width=デバイス幅、初期スケール=1.0"> <meta http-equiv="X-UA-compatible" content="ie=edge"> <title>透明な背景、透明なテキスト</title> <スタイル> * { パディング: 0; マージン: 0; } 。容器 { 幅: 600ピクセル; 高さ: 400px; 背景: url('https://img1.dongqiudi.com/fastdfs3/M00/18/56/ChOxM1stHByARuNmAAGsJDKXtuM269.jpg') 繰り返しなし; 背景サイズ: カバー; -webkit-background-size: カバー; -o-background-size: カバー; 背景位置: 中央 0; } .デモ{ 位置: 絶対; 幅: 260ピクセル; 高さ: 60px; 上: 260px; 行の高さ: 60px; テキスト配置: 中央; 背景色: 黒; 不透明度: 0.5; } .demo p { 色: #FFF; フォントサイズ: 18px; フォントの太さ: 600; } </スタイル> </head> <本文> <div class="コンテナ"> <div class="demo"> <p>2018年ワールドカップ開幕まであと10日</p> </div> </div> </本文> </html> 効果は以下のとおりです。 背景は透明で、テキストも透明です。png これはニーズを満たしているように見えますが、完璧ではありません。不透明度を設定すると、要素全体が半透明になり、テキストがぼやけて表示されます。この解決策はお勧めできません。 実際、不透明度を設定することは、CSS で透明性を実現する唯一の方法ではありません。他に 2 つのタイプがあります:
ここでは RGBA を設定する方法を使用します。 <!DOCTYPE html> <html lang="ja"> <ヘッド> <メタ文字セット="UTF-8"> <meta name="viewport" content="width=デバイス幅、初期スケール=1.0"> <meta http-equiv="X-UA-compatible" content="ie=edge"> <title>背景は透明、テキストは不透明</title> <スタイル> * { パディング: 0; マージン: 0; } 。容器 { 幅: 600ピクセル; 高さ: 400px; 背景: url('https://img1.dongqiudi.com/fastdfs3/M00/18/56/ChOxM1stHByARuNmAAGsJDKXtuM269.jpg') 繰り返しなし; 背景サイズ: カバー; -webkit-background-size: カバー; -o-background-size: カバー; 背景位置: 中央 0; } .デモ{ 位置: 絶対; 幅: 260ピクセル; 高さ: 60px; 上: 260px; 行の高さ: 60px; テキスト配置: 中央; 背景色: rgba(0,0,0,0.5); } .demo p { 色: #FFF; フォントサイズ: 18px; フォントの太さ: 600; } </スタイル> </head> <本文> <div class="コンテナ"> <div class="demo"> <p>2018年ワールドカップ開幕まであと10日</p> </div> </div> </本文> </html> 効果は以下のとおりです。 背景は透明、テキストは不透明.png この設定を行うと、テキストがより鮮明に表示されます。 まとめ 実は、この要件を満たす方法は 1 つだけではありません。同じ位置に 2 つの DIV を使用し、1 つを半透明の背景の DIV、もう 1 つをテキストの DIV にすることもできます。この方法でも問題を解決できますが、絶対位置または負のマージン、および空のコンテンツを含む DIV が必要です。この方法は、次の例に示すように、一部のシナリオでは少し複雑に見える場合があります。そのため、実際の需要シナリオで具体的な問題を分析する必要があります。 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 |
<<: Docker-compose チュートリアルのインストールとクイックスタート
インタビュアー: Vue のソースコードを読んだことはありますか?応募者:あります。インタビュアー:...
1. IE6 では z-index が無効です。 CSS では、階層を変更するために z-index...
実際、Apacheクラスタを構築するのは難しくありません。私もインターネットで情報を見つけて自分で設...
このチュートリアルでは、参考のためにmysqlインストーラコミュニティ8.0.12.0のインストール...
構造とプレゼンテーションを分離するもう 1 つの重要な側面は、セマンティック マークアップを使用して...
目次序文ローカルストレージの使用シナリオ使用上の問題解決機能性有効期限を追加データ暗号化を追加する命...
コードをコピーコードは次のとおりです。 .sugLayerDiv{位置:相対; overflow:h...
1. CSS スプライトを使用します。利点は、CSS で使用される小さな画像を 1 つの大きな画像に...
1. 関連する技術的なポイントバイト版ヴュー3 ts統合ルーティングvuexを統合するAxiosを統...
vueプロジェクトをパッケージ化してサーバーにデプロイし、正常にログインできるが、ローカルで起動する...
この記事では、Windows 10環境でのMySQL 5.5のインストールと使用方法を紹介します。リ...
ステップ1: Djangoプロジェクトを作成するターミナルを開き、書き込みたいプロジェクトのアドレス...
テスト: Chrome v80.0.3987.122 は正常です方法は2つあります。通常のラベルの位...
目次MySQL クエリツリー構造1. ツリー構造について2. MySQLでカスタム関数を定義する方法...
目次1. MacへのDockerのインストール2. Win 10 システムでの Docker のイン...