CSS 實用實例(推薦)

2020-10-23 18:54:32

字體：大中小

來源：轉載

供稿：網友

Background 背景設置背景顏色

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執行]

設置一張圖片做為背景

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執行]

垂直重復背景圖片

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執行]

水平重復背景圖片

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執行]

怎樣放置背景圖片（位置擺放）

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執行]

背景不滾動

<html> <head> <style type="text/css"> body { background-image: url('http://www.blueidea.com/articleimg/2006/07/3744/smiley.gif'); background-repeat: no-repeat; background-attachment: fixed } </style> </head> <body> The image will not scroll with the rest of the page The image will not scroll with the rest of the page The image will not scroll with the rest of the page The image will not scroll with the rest of the page The image will not scroll with the rest of the page The image will not scroll with the rest of the page The image will not scroll with the rest of the page The image will not scroll with the rest of the page The image will not scroll with the rest of the page The image will not scroll with the rest of the page The image will not scroll with the rest of the page The image will not scroll with the rest of the page The image will not scroll with the rest of the page The image will not scroll with the rest of the page The image will not scroll with the rest of the page The image will not scroll with the rest of the page The image will not scroll with the rest of the page The image will not scroll with the rest of the page The image will not scroll with the rest of the page The image will not scroll with the rest of the page The image will not scroll with the rest of the page The image will not scroll with the rest of the page The image will not scroll with the rest of the page The image will not scroll with the rest of the page </body> </html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執行]

背景屬性一行解決（用一行文字定義背景屬性）

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執行]

上一篇：給圖片加陰影效果的CSS

下一篇：css靜態濾鏡