CSS速成教程 介紹網頁背景 3

2022-09-01 13:03:14 字數 1329 閱讀 5117

css 允許應用純色作為背景,也允許使用背景影象建立相當複雜的效果

屬性描述

background-attachment

背景影象是否固定或者隨著頁面的其餘部分滾動

background-color

設定元素的背景顏色

background-image

把設定為背景

background-position

設定背景的起始位置

background-repeat

設定背景是否及如何重複

**中的屬性我們將會通過下面兩個例子給大家一一講述。

例子 1:背景顏色

body

例子 2:設定背景圖

body

大家可以看到顯示出來的背景圖有很多個 python ,這是因為預設情況下背景圖顯示重複,我們可以background-repeat屬性來設定是否可重複。 css.css 新增以下內容

body

no-repeat 表示不能重複,repeat 可重複,repeat-x 表示 x 軸重複,repeat-y 表示 y 軸重複

ackground-position用來設定的起始位置 下面的例子在 body 元素中將乙個背景圖從中間頂部放置:

body

為 background-position 屬性提供值有很多方法。首先,可以使用一些關鍵字:top、bottom、left、right 和 center。通常,這些關鍵字會成對出現,不過也不總是這樣。還可以使用長度值,如 100px 或 5cm,最後也可以使用百分數值。不同型別的值對於背景影象的放置稍有差異。我們這裡不詳細闡述屬性值,需要用到的時候大家可以在 w3school 上面查詢。

背景關聯 如果網頁比較長,那麼當網頁向下滾動時,背景影象也會隨之滾動。當網頁滾動到超過影象的位置時,影象就會消失。 我們可以通過background-attachment屬性防止這種滾動。通過這個屬性,可以宣告影象相對於可視區是固定的(fixed),因此不會受到滾動的影響:

body

防止背景圖滾動相信大家大家也是經常見到,尤其是一些煩人的廣告。

屬性描述

background-size

規定背景的尺寸

background-origin

規定背景的定位區域

background-clip

規定背景的繪製區域

我們還是引用上面的例子來講述這些屬性。

body

CSS速成教程 2

派生選擇器 通過依據元素在其位置的上下文關係來定義樣式,可以使標記更加簡潔。派生選擇器允許你根據文件的上下文關係來確定某個標籤的樣式。通過合理地使用派生選擇器,我們可以使 html 變得更加整潔。比方說,你希望列表中的 strong 元素變為紅色,而不是通常的黑色,可以這樣定義乙個派生選擇器 li ...

CSS速成教程 1

css 指的是層疊樣式表 cascading stylesheet 在網頁製作時採用層疊樣式表技術,可以有效地對頁面的布局 字型 顏色 背景和其它效果實現更加精確的控制。學習路徑 css 規則由兩個主要的部分構成 選擇器,以及一條或多條宣告。1 selector 選擇器通常是您需要改變樣式的 htm...

CSS速成教程 樣式2 5

在 css 的鏈結屬性設定中,我們能設定 color,font family,background 等等,不同的狀態我們可以設定對應的樣式。下面我們就來看看對應樣式的屬性設定。a link 普通的 未被訪問的鏈結 a visited 使用者已訪問的鏈結 a hover 滑鼠指標位於鏈結的上方 a a...