背景画像にテキストを表示するためのCSS

背景画像にテキストを表示するためのCSS

効果:

ここに画像の説明を挿入

<div class="imgs">
  <!-- 背景画像 -->
  <div class="背景">
    <img :src="item.voteTime ? imgSrc1:imgSrc2" width="100%" height="100%" alt="" />
  </div>
  <!-- テキスト -->
  <div class="front">
    <div v-if="item.voteTime">
      <p>本当にありがとうございました! </p>
      <p>投票しました: <span>{{item.voteTime}}</span></p>
    </div>
    <p v-else style="color:#999999">申し訳ありませんが、投票は完了していません~</p>
  </div>
</div>

データ() {
  戻る {
    imgSrc1:require('@/common/imgs/yitoupiao.png'),
    imgSrc2:require('@/common/imgs/weiwancheng.png'),
  }
},

外側の大きな div: 幅と高さを設定します。
背景画像: 1) 画像全体を占める場合は、幅と高さの両方を 100% に設定します。2) 画像の一部のみを占める場合は、位置を設定します。重要なポイント: z-index はテキスト レベルより低くする必要があります。そうでない場合は、隠れてしまいます。
テキスト: 要件に応じて配置することも、配置しないこともできます。z-index は画像よりも高く設定する必要があります。

.imgs {
  背景: #fff;
  位置: 相対的;
  幅: 100%;
  高さ: 250px;
  色: #195541;
  。背景{
    // 幅:100%;  
    // height:100%; /**幅と高さは 100% なので、画像が画面いっぱいに表示されます*/
    // zインデックス:-1;
    zインデックス:1;
    位置: 絶対;
    幅: 250ピクセル;
    高さ: 100%;
    右: 20px;
    下: 0px;
  }
  。フロント{
    zインデックス:2;
    位置: 絶対;
    テキスト配置: 中央;
    トップ: 39%
    左: 25%;
    フォントの太さ: 標準;
    行の高さ: 40px;
    フォントサイズ: 28px;
  }
}

開発プロセス中にバグが発生しました。最初に背景画像の z-index を -1 に設定したところ、背景画像が h5 に表示されることと表示されないことがありました。その後、この問題を解決するために、z-index を正の数の 1 に変更しました。

CSSを使用して背景画像にテキストを配置する方法についての記事はこれで終わりです。CSSを使用して背景画像にテキストを配置する方法の詳細については、123WORDPRESS.COMの以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも123WORDPRESS.COMをよろしくお願いいたします。

<<:  ページのスクロールバーを無効にするには、overflow: hiddenを使用します。

>>:  ウェブデザイン必携ハンドブック 216 ウェブセーフカラー

推薦する

CSS 境界線の半分または部分的に表示される実装コード

1. 疑似クラスを使用して境界線の半分を表示する <!DOCTYPE html> <...

MySQL 制約の超詳細な説明

目次MySQL 制約操作1. 非ヌル制約2. ユニーク制約3. 主キー制約4. 外部キー制約5. カ...

mysql5.7のインストールとNavicateの長期無料利用の実施手順

(I) mysql5.7のインストール: ❀詳細:無料のグリーンバージョン5.7のインストール方法は...

Mysql通信プロトコルの詳細な説明

1.Mysql接続方法MySQL 通信プロトコルを理解するには、まず MySQL サーバーへの接続に...

Vue3 ベースのスクリプト設定構文 $refs の使用

目次1. Vue2 構文2. Vue3の使用1. コンポーネントのref値を設定する2. コンポーネ...

SQL 実践演習: オンライン モール データベースの製品カテゴリ データ操作

オンラインショッピングモールデータベース - 商品カテゴリデータ操作(I)プロジェクトの説明電子商取...

JavaScript でシンプルな Web 時計を実装する

JavaScript を使用して Web ページ クロックを実装します。効果は次の図に示されています...

JavaScript を使用してページ要素のオフセットを取得/計算する方法

質問コントロールをクリックすると、コントロールの下にフローティング レイヤーが表示されます。通常の方...

Linux コマンドで .sql ファイルをエクスポートおよびインポートする方法

この記事では、Linux コマンドを使用して .sql ファイルをエクスポートおよびインポートする方...

時点別のMySQLデータベース復旧実績

はじめに: 時間ポイントによる MySQL データベースの復旧どの企業にとっても、データは最も価値の...

Vue で debouce の手ぶれ補正機能を使用する方法

目次1. 手ぶれ補正機能2. Vueでdebouceの手ぶれ補正機能を使用する1. 手ぶれ補正機能2...

deepin apt コマンドを使用して最新バージョンの docker をインストールする方法

ステップ1: Ubuntuソースを追加するルートに切り替える suルートソフトウェアソースファイルの...

CSSは、閉じることができるマスクレイヤーを備えたポップアップウィンドウ効果を実装します。

実際の開発ではポップアップウィンドウがよく使われます。CSS3を勉強していたときに、閉じることができ...

JSコンストラクタとインスタンス化およびプロトタイプ導入の関係

目次1. コンストラクタとインスタンス化2. コンストラクターとインスタンス化の関係は何ですか? 3...

一時ファイルを作成できないために MySQL が起動できない問題を解決する方法

問題の説明最近、仕事中に問題が発生しました。MySQL が起動に失敗しました。エラー ログは次のとお...