[CSSチュートリアル]cssで背景画像の上にテキストを実現する
2022-02-03 08:56:58
効果
<div class="imgs">
<! -- background image -->
<div class="background">
<img :src="item.voteTime ? imgSrc1:imgSrc2" width="100%" height="100%" alt="" />
</div>
<! --text -->
<div class="front">
<div v-if="item.voteTime">
<p>Thanks a lot! </p>
<p>You have voted: <span>{{item.voteTime}}</span></p>
</div>
<p v-else style="color:#999999">Sorry, you did not complete the poll~</p>
</div>
</div>
data() {
return {
imgSrc1:require('@/common/imgs/yitoupiao.png'),
imgSrc2:require('@/common/imgs/weiwancheng.png'),
}
},
大きなdivの外側:幅と高さを設定します。
背景画像です。1) 広がっている場合は、幅と高さの両方を100%に設定します。2) 一部分しか占めない場合は、位置を設定します。強調:z-indexはテキストのレベルより低くなければなりません、さもなければ、それは不明瞭になります。
テキスト:配置される位置に応じて位置決め、または位置決め解除が可能で、フォーカスオンz-indexは画像より高く設定されます。
.imgs {
background: #fff;
position: relative;
width: 100%;
height: 250px;
color: #195541;
.background{
// width:100%;
// height:100%; /* 100% width and height is for the image to spread across the screen */
// z-index:-1;
z-index:1;
position: absolute;
width: 250px;
height: 100%;
right: 20px;
bottom: 0px;
}
.front{
z-index:2;
position: absolute;
text-align: center;
top: 39%;
left: 25%;
font-weight: normal;
line-height: 40px;
font-size: 28px;
}
}
開発中にバグに遭遇しました。背景画像のz-indexを最初に-1にしてしまったため、h5に背景画像がしばらく表示され、その後しばらく表示されないという現象が発生しました。
背景画像の上にCSSテキストに関する記事は以上です、もっと関連する背景画像の上にCSSテキストに関する内容はスクリプトハウスの過去記事を検索するか、以下の関連記事を引き続き閲覧してください、今後もスクリプトハウスをもっと応援してくださいね。
関連
-
[CSSチュートリアル】純粋なCSSでWebページの内容をコピーできないようにする方法
-
[CSSチュートリアル】クールなネオン効果を実現するピュアCSS(デモあり)
-
[CSSチュートリアル】ネイティブCSSでテキストの無制限回転を実現する汎用的な方法
-
[CSSチュートリアル]CSS気まぐれボーダーアニメーション効果
-
[CSSチュートリアル】背景画像画面の適応的な実装を実現するCSS
-
[CSSチュートリアル】CSSでマウスの位置をマッピングし、マウスの動きでページ要素を制御する効果を実現する(コード例)
-
[CSSチュートリアル]cssに0.5pxの行を実装してモバイル互換の問題を解決する(推奨)
-
[CSSチュートリアル】CSSのラインハイトとハイトを詳しく解説
-
[CSSチュートリアル】2要素ブレンド効果(スティッキー効果)を実現するCSS)
-
[CSSチュートリアル】display:olck/noneでメニューバーを完成させる方法
最新
-
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 実装 サイバーパンク風ボタン
おすすめ
-
[CSSチュートリアル]CSSで簡単!高周波な異形ボタンを実現する方法
-
[CSSチュートリアル】CSSアニメーション 途中で止める方法とポーズを維持する方法
-
[css3]CSS3タブアニメーションの背景切り替えの動的効果例
-
[CSSチュートリアル]CSSは、メソッドのさまざまな記事の分割行のスタイルの要約を達成するために
-
[CSSチュートリアル】CSSで実現できるのなら、わざわざJavaScriptを使う必要はない
-
[CSSチュートリアル】CSSプリグラミング言語と詳細解説の違いについて
-
[css3]CSS3は本当にSCSSに取って代わるのだろうか?
-
[CSSチュートリアル】画面全体に広がるアダプティブな高さを実現するCSS
-
[CSSチュートリアル】cssのボックスモデルを解説 余白のパディングと省略について
-
[CSSチュートリアル]なぜheadタグにcssを入れるのか?