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

ホームページ

ウェブフロントエンド

CSSチュートリアル

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

藏色散人

Dec 15, 2020 am 10:40 AM

css

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="/static/imghw/default1.png"  data-src="img/4.jpg"  class="lazy"     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で画像の位置を調整する方法

background-position プロパティは、背景画像の開始位置を設定します。

このプロパティは、元の背景画像 (background-image で定義) の位置を設定します。背景画像を繰り返す場合は、この位置から開始されます。

ヒント: このプロパティが Firefox と Opera で適切に動作するようにするには、background-attachment プロパティを「fixed」に設定する必要があります。

推奨: 「css ビデオチュートリアル」

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

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

ホットトピック

Java チュートリアル

1670

CakePHP チュートリアル

1428

Laravel チュートリアル

1329

PHP チュートリアル

1276

C# チュートリアル

1256

Related knowledge

VueでBootstrapの使用方法 Apr 07, 2025 pm 11:33 PM

vue.jsでBootstrapを使用すると、5つのステップに分かれています。ブートストラップをインストールします。 main.jsにブートストラップをインポートしますブートストラップコンポーネントをテンプレートで直接使用します。オプション：カスタムスタイル。オプション：プラグインを使用します。

HTML、CSS、およびJavaScriptの理解：初心者向けガイド Apr 12, 2025 am 12:02 AM

webdevelopmentReliesOnhtml、css、andjavascript：1）htmlStructuresContent、2）cssStylesit、および3）Javascriptaddsinteractivity、形成、

HTML、CSS、およびJavaScriptの役割：コアの責任 Apr 08, 2025 pm 07:05 PM

HTMLはWeb構造を定義し、CSSはスタイルとレイアウトを担当し、JavaScriptは動的な相互作用を提供します。 3人はWeb開発で職務を遂行し、共同でカラフルなWebサイトを構築します。

ブートストラップにスプリットラインを書く方法 Apr 07, 2025 pm 03:12 PM

ブートストラップスプリットラインを作成するには2つの方法があります。タグを使用して、水平方向のスプリットラインを作成します。 CSS Borderプロパティを使用して、カスタムスタイルのスプリットラインを作成します。

ブートストラップに写真を挿入する方法 Apr 07, 2025 pm 03:30 PM

ブートストラップに画像を挿入する方法はいくつかあります。HTMLIMGタグを使用して、画像を直接挿入します。ブートストラップ画像コンポーネントを使用すると、レスポンシブ画像とより多くのスタイルを提供できます。画像サイズを設定し、IMG-Fluidクラスを使用して画像を適応可能にします。 IMGボーダークラスを使用して、境界線を設定します。丸い角を設定し、IMGラウンドクラスを使用します。影を設定し、影のクラスを使用します。 CSSスタイルを使用して、画像をサイズ変更して配置します。背景画像を使用して、背景イメージCSSプロパティを使用します。

ブートストラップのフレームワークをセットアップする方法 Apr 07, 2025 pm 03:27 PM

Bootstrapフレームワークをセットアップするには、次の手順に従う必要があります。1。CDNを介してブートストラップファイルを参照してください。 2。独自のサーバーでファイルをダウンロードしてホストします。 3。HTMLにブートストラップファイルを含めます。 4.必要に応じてSASS/LESSをコンパイルします。 5。カスタムファイルをインポートします（オプション）。セットアップが完了したら、Bootstrapのグリッドシステム、コンポーネント、スタイルを使用して、レスポンシブWebサイトとアプリケーションを作成できます。