CSS位置決め画像の位置を変更しないようにする方法-CSSチュートリアル-php.cn

CSS位置決め画像の位置を変更しないようにする方法

藏色散人

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

オリジナル

3400 人が閲覧しました

画像の位置を変更せずに CSS で配置する実装方法: 最初に HTML サンプルファイルを作成し、次に背景の背景画像を導入し、最後に「position:fixed」スタイルを画像に追加して画像の位置を固定し、維持します。変わらずです。

CSS位置決め画像の位置を変更しないようにする方法

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

推奨事項: "css ビデオチュートリアル "

css では、固定配置 (位置: 固定) を使用して画像を配置し、画像の位置を変更しないようにできます。テキストをドラッグせずに画像の位置を変更できます。

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

fixed は、固定位置の要素を生成します。この要素はドキュメントフローから分離されており、ドキュメントフローの位置を占めません。ドキュメントフローの上に浮いていて、ブラウザウィンドウに対して相対的に配置されていると理解できます。

固定位置 (位置: 固定): 要素はブラウザウィンドウを基準にして配置されます。スライダーをどのように動かしても、要素はブラウザウィンドウを基準にして固定位置に固定されます。また、次の点にも注意してください。その兄弟要素は、配置の際にその存在を無視します。このときの上下左右もブラウザウィンドウを基準とした相対値となります。

例:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
.logo {
width: 540px;
height: 258px;
position: fixed;
background: url(https://www.baidu.com/img/bdlogo.png) no-repeat;
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
</style>
</head>
<body>
<div class="logo"> </div>
111<br/> 111
<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111
<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111
<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111
<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111
<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111
<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111
<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111
<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111
<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111
<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111
<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111
<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111
<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111
<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111
<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111
<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>
</body>
</html>

ログイン後にコピー

レンダリング:

CSS位置決め画像の位置を変更しないようにする方法