CSSで画像の位置を調整する方法-CSSチュートリアル-php.cn

CSSで画像の位置を調整する方法

藏色散人

リリース： 2023-01-04 09:37:27

オリジナル

25529 人が閲覧しました

CSS で画像の位置を調整する方法: 1. Position 属性を使用して、「」タグによって導入された画像の位置を制御します。2. 「background-position」属性を使用します。背景画像の開始位置を設定します。

CSSで画像の位置を調整する方法

このチュートリアルの動作環境: Windows 7 システム、css3 バージョン、Dell G3 コンピューター。

CSS で画像の位置を制御する方法の詳細な説明を見てみましょう:

1. Position 属性を使用して画像の位置を制御します

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>css控制图片位置</title>
</head>
<body>
<div style="width:500px;height:400px;border:1px solid red;position:relative;">
<img  src="img/4.jpg"   style="max-width:90%"/ alt="CSSで画像の位置を調整する方法" >
</div>
</body>
</html>

ログイン後にコピー

効果は次のとおりです

CSSで画像の位置を調整する方法

position 属性は要素の配置タイプを指定します。

この属性は、要素のレイアウトを確立するために使用される位置決めメカニズムを定義します。任意の要素を配置できますが、絶対要素または固定要素は、要素自体のタイプに関係なく、ブロックレベルのボックスを生成します。相対的に配置された要素は、通常のフローではデフォルトの位置からオフセットされます。

属性値:

absolute は、静的配置以外の最初の親要素を基準にして配置される絶対配置要素を生成します。要素の位置は、「left」、「top」、「right」、「bottom」属性によって指定されます。

fixed ブラウザウィンドウを基準にして絶対配置された要素を生成します。要素の位置は、「left」、「top」、「right」、「bottom」属性によって指定されます。

relative 通常の位置を基準にして相対的に配置された要素を生成します。したがって、「left:20」は要素の LEFT 位置に 20 ピクセルを追加します。

静的デフォルト値。位置決めを行わない場合、要素は通常のフローで表示されます (上、下、左、右、または z-index 宣言は無視されます)。

inherit は、position 属性の値を親要素から継承することを指定します。

2.background-position 属性は、背景画像の開始位置を設定します。

<html>
<head>
<style type="text/css">
body
{ 
  background-image:url(&#39;/i/eg_bg_03.gif&#39;);
  background-repeat:no-repeat;
  background-attachment:fixed;
  background-position:center;
}
</style>
</head>
<body>
<body>
<p><b>提示：</b>您需要把 background-attachment 属性设置为 "fixed"，
才能保证该属性在 Firefox 和 Opera 中正常工作。</p>
</body>
</body>
</html>

ログイン後にコピー

効果は次のとおりです。

CSSで画像の位置を調整する方法