最近、画像上に半透明の背景でテキストを表示する必要があるという要件に遭遇しました。その効果は次のようになります。 要件.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 チュートリアルのインストールとクイックスタート
序文ご存知のとおり、「CSS で要素を垂直方向に中央揃えするにはどうすればよいか」という質問は、すで...
この記事では、全選択または選択を反転する機能を実現するためのJavaScriptの具体的なコードを参...
目次序文1. これを使用してデータ内のデータを読み取るプロセス2. Dep.target はいつ存在...
Windows10 Home Edition でHyper-vを有効にする方法をまだ探していますか?...
この記事では、ページング効果表示を実現するためのnode+expressの具体的なコードを参考までに...
ロックの分類:データ操作の粒度から:テーブルロック:操作時にテーブル全体がロックされます。行ロック:...
目次序文インデックス プッシュダウンとは何ですか?インデックスプッシュダウン最適化の原理インデックス...
目次1. MySQLのインストール1.2 テーブル、データベース、ユーザーを作成する1.3 リモート...
ネットでいろいろ検索してみたところ、Linux システム向けではなく、現在の新しいバージョンと一致し...
ClickHouse は、オープンソースの列指向 DBMS (Yandex によって開発) です。 ...
今日、仕事中に左結合に関するSQLの問題に遭遇しました。後で解決しましたが、この問題を通じてSQLの...
MySQLをダウンロード5.1.1.1 より前のバージョン私のコンピュータは64ビットなので、Win...
Samba サービスでも NFS サービスでも、サーバーの起動時にリモート共有リソースが自動的にマ...
公式サイトをダウンロードまず公式ウェブサイトにアクセスしてMySQLをダウンロードしてくださいリンク...
序文:データベースのバックアップの重要性は、特にデータの損失が深刻な結果を招く可能性がある実稼働環境...