コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > htmlチュートリアル > 本文

背景サイズは背景のサイズを設定します image_html/css_WEB-ITnose

WBOY
リリース： 2016-06-24 11:51:04
オリジナル
1399 人が閲覧しました

background-size

長さの値 または パーセント として表示される背景画像のサイズを設定します。また、cover と contain を使用して画像を拡大縮小することもできます。

構文: 

background-size: auto | <长度值> | <百分比> | cover | contain
ログイン後にコピー

値の説明:

1、auto: デフォルト値、背景画像の元の高さと幅は変更されません

2、: ペアで表示されます。 200px 50px など、背景画像の幅と高さを最初の 2 つの値に設定します。値を設定するときは、それを画像の幅の値として使用して 3、<パーセント> ;

: 0%~100 % の間の任意の値。値を設定するときは、背景画像の幅と高さを前のパーセンテージで乗算した値に設定します。

4、cover

: 名前が示すように、

cover、つまり、背景画像がコンテナ全体を埋めるように拡大縮小されます 5: Contain、つまり背景を含みます。画像は片側がコンテナの端に近づく

まで比例して拡大縮小されます。

ヒント: 右側の編集ウィンドウに独自のコードを入力して、さまざまな値の効果を試すことができます。

りー

関連ラベル：
background-size 设置背景图片的大小
ソース：php.cn
前の記事：複数の背景 複数の背景_html/css_WEB-ITnose 次の記事：html_html/css_WEB-ITnose ul タグについて
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
Javafx でインライン CSS スタイルを動的に変更する アプリケーションが最大化されているときにペインの背景画像を変更しようとしています。私の背景はインライン CSS を使用して設定されています。スタイル用に 2 つの異なる変数と if...
から 2024-04-06 20:57:16
0
1
487
CSS を使用して Next.js の三目並べボードの各行の下のスペースを削除するにはどうすればよいですか? 各行の下にスペースがあるのはなぜですか? (CSS) 自分のスキルをテストするために Next.js 三目並べアプリを作成しようとしています。ただし、CSSに問題があります。ボード...
から 2024-04-05 11:39:02
0
1
1431
テキストエリアのサイズを変更したときにCSS変換を表示しないようにする方法はありますか? <textarea> の背景遷移をホバー時に設定したい場合、成功します。ただし、サイズを変更しようとすると、トランジション時間は引き続き機能します。これが私のコードです...
から 2024-04-03 17:02:11
0
1
245
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート