コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > ブートストラップのチュートリアル > 画面サイズに合わせてブートストラップで背景画像を設定する方法

画面サイズに合わせてブートストラップで背景画像を設定する方法

尚
リリース： 2019-07-18 17:34:09
オリジナル
13204 人が閲覧しました

画面サイズに合わせてブートストラップで背景画像を設定する方法

bootstrap は、画面サイズに合わせて背景画像を設定します。

このスタイルを CSS で編集します。 

.bg {
       background:url(图片地址) no-repeat center;
       background-size:contain;
}
ログイン後にコピー

次に、引用符で囲みます。あなたの div このスタイルは次のようになります: 

<div class="row bg">
ログイン後にコピー

画像がスクロール バーでスクロールしない場合、つまり固定されている場合は、fixd を追加します。CSS コードは次のとおりです: 

.bg {
       background:url(图片地址) no-repeat center fixed;
       background-size:contain;
}
ログイン後にコピー

ブートストラップに関連する技術的な記事については、Bootstrap チュートリアル 列にアクセスして学習してください。

以上が画面サイズに合わせてブートストラップで背景画像を設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル：
bootstrap图片自适
ソース：php.cn
前の記事：ブートストラップを使用する理由 次の記事：ブートストラップで画像を中央に配置する方法
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
フォームからオプションを選択するときに画像の不透明度を変更する 値 1 (MasterCard) のオプションを選択したときに、idMaster の画像の不透明度を 1 に変更するにはどうすればよいですか?それを、それぞれ独自の ID を持つこ...
から 2024-04-03 23:00:48
0
2
304
Postman を使用して登録機能をテストするためにリクエスト本文を入力できない *修正済み* 私は、ユーザーが登録、ログイン、投稿の作成、プロフィールと投稿の編集、投稿の削除、自分自身の完全な削除ができる、非常にシンプルなソーシャル メディア アプリケーションを開発していま...
から 2024-04-01 10:09:37
0
1
348
配列 JS 内の 52 枚の画像 私は IT Assistant 1 年を勉強しており、現在 JavaScriptHTML と CSS を使用してカード ゲームを作成する必要があります。私の質問は、52 枚のカード...
から 2024-03-30 21:14:49
0
1
272
私のウェブサイトはデスクトップでは正常に表示されますが、モバイル画面では表示されません 私は HTML/CSS を使用して個人の Web サイトをデザインしています。ただし、テキストは携帯電話に合わせて拡大縮小されません。下の写真を参照してください。 Web サイトは...
から 2024-03-30 15:09:41
0
1
352
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート