首頁 > 文章 > web前端 > css定位圖片位置不變的實作方法

css定位圖片位置不變的實作方法

藏色散人原創: 2020-12-15 10:29:253296瀏覽

css定位圖片位置不變的實作方法：先建立一個HTML範例檔案；然後引入一個background背景圖片；最後給該圖片加上「position: fixed」樣式即可固定圖片位置並保持不變。

css定位圖片位置不變的實作方法

本教學操作環境：windows7系統、css3版、thinkpad t480電腦。

推薦：《css影片教學》

在css中，可以使用固定定位（position: fixed）來定位圖片保持圖片位置不變，讓圖片位置可以不隨著文字的拖曳而改變圖片位置。

position: fixed用於產生固定定位的元素，相對於瀏覽器視窗進行定位。元素的位置透過 "left", "top", "right" 以及 "bottom" 屬性進行規定。

fixed 產生固定定位元素，元素脫離文件流，不佔據文件流的位置，可以理解為漂浮在文件流的上方，相對於瀏覽器視窗進行定位。

固定定位（position:fixed）：元素以相對瀏覽器視窗為基準進行定位的，無論怎樣移動你的滑動條，它都會固定在相對於瀏覽器視窗的固定位置，另外要注意，它的兄弟元素將會在位置排布上忽略它的存在。這時候用的top，bottom，left，right也是相對於瀏覽器視窗而言的。

範例：

<!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定位圖片位置不變的實作方法

#說明：

從上面的範例看出：可以使用position: fixed來固定圖片位置不變，讓圖片位置可以不隨著文字的拖曳而改變圖片位置。

以上是css定位圖片位置不變的實作方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！

css css3 html position background

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：css vw是什麼單位下一篇：css vw是什麼單位

看更多