3.5背景图像固定(背景附着)
生活随笔
收集整理的這篇文章主要介紹了
3.5背景图像固定(背景附着)
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
提示:background-attachment屬性設置背景圖像是否固定或者隨著頁面其余部分滾動、兩屬性值,scroll圖片跟著內(nèi)容一起滾動、fixed圖片固定內(nèi)容滾動。
1、語法:
? ? ? ? ? ? ? ?div{
? ? ? ? ? ? ? ? ? ? ? ?background-attachment:scroll;
? ? ? ? ? ? ? ? ? ? }
解釋:
scroll? ? ? ? ? ?背景圖片跟隨對象內(nèi)容滾動
fixed? ? ? ? ? ? 背景圖像固定
自己代碼展示:
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>背景圖像固定</title><style>body {background-image: url(wzbj.jpg);/* 這個表示圖片背景 */background-repeat: no-repeat;/* 這個表示平鋪背景 */background-position: center top;/* 這個表示圖片位置:屬性值用是方向、還有兩不一樣的屬性值一個是精準位置、另一個是混合位置 *//* background-attachment: scroll; *//* 這個表示“background-attachment”表示圖片附著背景兩屬性值:第一個是:scroll表示背景跟內(nèi)容一起滾動另一個是:fixed 表示背景固定內(nèi)容在滾動 */background-attachment: fixed;color: azure;font-size: 20px;}</style> </head><body><p>你好呀!小豬佩奇</p><p>你好呀!小豬佩奇</p><p>你好呀!小豬佩奇</p><p>你好呀!小豬佩奇</p><p>你好呀!小豬佩奇</p><p>你好呀!小豬佩奇</p><p>你好呀!小豬佩奇</p><p>你好呀!小豬佩奇</p><p>你好呀!小豬佩奇</p><p>你好呀!小豬佩奇</p><p>你好呀!小豬佩奇</p><p>你好呀!小豬佩奇</p><p>你好呀!小豬佩奇</p><p>你好呀!小豬佩奇</p><p>你好呀!小豬佩奇</p><p>你好呀!小豬佩奇</p><p>你好呀!小豬佩奇</p><p>你好呀!小豬佩奇</p><p>你好呀!小豬佩奇</p><p>你好呀!小豬佩奇</p><p>你好呀!小豬佩奇</p><p>你好呀!小豬佩奇</p><p>你好呀!小豬佩奇</p><p>你好呀!小豬佩奇</p><p>你好呀!小豬佩奇</p><p>你好呀!小豬佩奇</p><p>你好呀!小豬佩奇</p><p>你好呀!小豬佩奇</p><p>你好呀!小豬佩奇</p><p>你好呀!小豬佩奇</p><p>你好呀!小豬佩奇</p><p>你好呀!小豬佩奇</p><p>你好呀!小豬佩奇</p><p>你好呀!小豬佩奇</p><p>你好呀!小豬佩奇</p><p>你好呀!小豬佩奇</p><p>你好呀!小豬佩奇</p><p>你好呀!小豬佩奇</p><p>你好呀!小豬佩奇</p><p>你好呀!小豬佩奇</p><p>你好呀!小豬佩奇</p><p>你好呀!小豬佩奇</p><p>你好呀!小豬佩奇</p><p>你好呀!小豬佩奇</p><p>你好呀!小豬佩奇</p><p>你好呀!小豬佩奇</p><p>你好呀!小豬佩奇</p><p>你好呀!小豬佩奇</p></body></html>結果顯示:
總結
提示:這里對文章進行總結:
例如:以上就是今天要講的內(nèi)容,本文僅僅簡單介紹了background-attachment屬性設置背景圖像是否固定或者隨著頁面其余部分滾動、兩屬性值,scroll圖片跟著內(nèi)容一起滾動、fixed圖片固定內(nèi)容滾動。
總結
以上是生活随笔為你收集整理的3.5背景图像固定(背景附着)的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 前端html生成图片,HTML5 Can
- 下一篇: ppt 电子计算机的故事,《计算机之父的