ホームページ > 記事 > ウェブフロントエンド > CSS位置決め画像の位置を変更しないようにする方法
CSS位置決め画像の位置を変更しないようにする方法
- 藏色散人オリジナル
- 2020-12-15 10:29:253360ブラウズ
画像の位置を変更せずに CSS で配置する実装方法: 最初に HTML サンプル ファイルを作成し、次に背景の背景画像を導入し、最後に「position:fixed」スタイルを画像に追加して画像の位置を固定し、維持します。変わらずです。
このチュートリアルの動作環境: 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>レンダリング:
手順:
上記の例からわかるように、次のようになります。画像の位置を変更しないように固定するには、position:fixed を使用します。これにより、テキストのドラッグによって画像の位置が変更されなくなります。
以上がCSS位置決め画像の位置を変更しないようにする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。