ホームページ >ウェブフロントエンド >フロントエンドQ&A >CSSで背景画像の位置を設定する方法
CSS で背景画像の位置を設定する方法: 最初に HTML サンプル ファイルを作成し、次に本文に div を作成し、最後に「background: url('/i/eg_bg_03.gif')no」を渡します。 -repeat leftbottom ;}" 背景画像の位置を設定するだけです。
この記事の動作環境: Windows7 システム、HTML5&&CSS3 バージョン、Dell G3 コンピューター。
CSS で背景画像の位置を設定するにはどうすればよいですか?
背景画像を使用する場合、背景画像の位置が希望どおりにならないことがよくあります。では、背景画像の位置を設定するにはどうすればよいでしょうか? CSSで背景画像の位置を設定する方法を見てみましょう。
背景画像の背景画像位置属性では、要素の背景画像の位置を制御するために、background-position が使用されます。次の 3 つの値を受け入れます:
キーワード: 上、右、下、左、中央など
長さの値: px、em、rem など。
パーセントvalue :%
background-position プロパティは、背景画像の開始位置を設定します。
このプロパティは、元の背景画像 (background-image で定義) の位置を設定します。背景画像を繰り返す場合は、この位置から開始されます。
#例:<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div{width: 200px;height: 200px; border:1px solid #ccc; background: url('/i/eg_bg_03.gif') no-repeat left bottom;} </style> </head> <body> <div></div> </body> </html>効果は次のとおりです: background-position 属性の属性値:
一部の属性値の意味は次のとおりです: top: 背景画像の初期位置は要素の先頭です
center: 背景画像の開始位置は要素の中央ですleft: 背景画像の開始位置は要素の左側です right:背景画像の開始位置は要素の右側です bottom: 背景画像の開始位置は要素のbottom
です
以上がCSSで背景画像の位置を設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。