css如何實現固定的背景圖像

來源：懂視網責編：小采時間：2020-11-02 22:13:35

css如何實現固定的背景圖像

css如何實現固定的背景圖像:所謂固定背景圖像，就是當我們在頁面輸入任何內容時或者移動鼠標，背景圖像都不會發生變動。css實現背景圖像固定也是非常簡單的，我們可以使用css中的background的相關屬性來實現。推薦參考：《CSS教程》那么我們在前面的文章中有給大家介紹過CSS如何實現

推薦度：

點擊下載本文 文檔為doc格式

導讀css如何實現固定的背景圖像:所謂固定背景圖像，就是當我們在頁面輸入任何內容時或者移動鼠標，背景圖像都不會發生變動。css實現背景圖像固定也是非常簡單的，我們可以使用css中的background的相關屬性來實現。推薦參考：《CSS教程》那么我們在前面的文章中有給大家介紹過CSS如何實現

所謂固定背景圖像，就是當我們在頁面輸入任何內容時或者移動鼠標，背景圖像都不會發生變動。css實現背景圖像固定也是非常簡單的，我們可以使用css中的background的相關屬性來實現。

推薦參考：《CSS教程》

那么我們在前面的文章中有給大家介紹過CSS如何實現背景圖像重復效果。

下面我們就繼續給大家介紹css背景圖像固定的實現方法。

代碼如下：

<!DOCTYPE>
<html>
<meta charset="utf-8">
<head>
 <title></title>
 <style type="text/css">
 body {
 background-image: url("/test/img/154e.png");
 background-repeat: no-repeat;
 background-attachment: fixed;
 }
 </style>

</head>
<body>
<p>這里是一行文字：圣誕節快樂！</p>
<p>這里是一行文字：圣誕節快樂！</p>
<p>這里是一行文字：圣誕節快樂！</p>
<p>這里是一行文字：圣誕節快樂！</p>
<p>這里是一行文字：圣誕節快樂！</p>
<p>這里是一行文字：圣誕節快樂！</p>
</body>
</html>

效果如下圖：