CSSの画像に基づいてdivを配置する方法

CSS では、background-position 属性を使用して DIV 内の画像の位置を制御できます。具体的な手順は次のとおりです。 水平方向の位置決め:background-position の最初の値は画像の幅です。 。垂直位置:background-position の 2 番目の値は画像の高さです。同時配置:background-position は幅と高さの値を同時に設定します。

CSS を使用して、画像の位置と一致するように DIV を配置します。

CSS では、 を使用できます。 background-position div 要素内の画像の位置を制御する属性。このプロパティは 2 つの値を受け入れます。1 つ目は画像の水平位置を制御し、2 つ目は画像の垂直位置を制御します。単位はピクセル (px)、パーセント (%)、またはキーワード (left、center、right、top) です。 ＃＃＃、 ＃＃＃底＃＃＃）。 水平方向の配置

画像に基づいて div を水平方向に配置するには、background-position

の最初の値を画像の幅に設定します。 。たとえば、画像の幅が 200 ピクセルの場合、CSS コードは次のようになります。

<code class="css">div {
  width: 200px;
  height: 100px;
  background-image: url("image.jpg");
  background-size: cover;
  background-position: 200px 0;
}</code>

verticalpositioning

画像に基づいて div を垂直に配置するには、 background-position

の 2 番目の値は画像の高さに設定されます。たとえば、画像の高さが 100 ピクセルの場合、CSS コードは次のようになります。

<code class="css">div {
  width: 200px;
  height: 100px;
  background-image: url("image.jpg");
  background-size: cover;
  background-position: 0 100px;
}</code>

同時に配置

画像の水平位置と垂直位置の両方に基づいて div を配置します。画像には 2 つの値を配置でき、対応する画像の寸法に設定されます。例:

<code class="css">div {
  width: 200px;
  height: 100px;
  background-image: url("image.jpg");
  background-size: cover;
  background-position: 200px 100px;
}</code>

以上がCSSの画像に基づいてdivを配置する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。