設定網頁背景的幾種方法及網頁中小icon的載入

2021-07-31 07:04:05 字數 858 閱讀 9548

設計網頁時,我們一般不喜歡讓背景白白的,那麼問題來了——

找到的背景遮不住整個網頁怎麼辦?

position:absolute;

top:0;left:0;height:100%;width:100%;

★z-index:-9;(層次設為負數)

}即將置於其他頁面元素的下層之後設定它不隨網頁滾動

也可用於設定類似花紋的重複圖案背景(見下文安利的patterninja)

3.cover屬性:

cover把背景影象拉伸至足夠大,以使背景影象完全覆蓋背景區域。

背景影象的某些部分也許無法顯示在背景定位區域中。background-size:cover;

用這種方法時應考慮不同大小螢幕導致變形的問題

自行設計背景:

1.線性漸變background:liner-gradient(#fff,#000)  (例),實現黑到白漸變,其中的#fff和#000可以用rgb(x,y,z,w)進行設定,這樣可以設定背景的透明度

由於——

a.網頁中通常會包含大量且小尺寸的背景圖或裝飾性圖,由於http1.1協議的侷限,這通常會給web伺服器帶來併發性問題和流量負擔

b.每個都包含有頭等元資訊

c.每個都占用乙個http連線,都需要接髮http頭資訊

d.http1.1協議預設支援併發連線數量有限

因此可將若干小圖示「合成」在一張大圖上,載入時只載入一張大圖,而顯示時顯示大圖的其中一部分,這樣可以減少相關資訊的重複載入,且不需考慮併發載入元素數量有限的問題,減少網路負擔,提高載入速度,節約頻寬(合成大圖工具**:css sprite)

又一種匯入小圖示的方法:「font awesome」

用於設定類似花紋的重複圖案背景,

CSS樣式設定網頁背景

首先我們要知道在html css裡面,有關背景的設定都與background有關,比如background color background image 等 1 background color屬性 設定背景顏色 語法 background color 顏色 這裡的顏色可以直接用顏色名字,也可以使用...

網頁背景的屬性及使用

1.瀏覽器預設字型大小是font size 16px 谷歌最小字型是10培訓,其他瀏覽器是12px。2.補充乙個新的選擇器 統配符選擇器 所有的標籤 標籤 class id 後代,子代,交集選擇器 3.background背景 背景顏色 background color red 簡寫backgrou...

構建顏色漸變的網頁背景(HTML JS)

之前做乙個介面時,想到用顏色漸變的做背景,剛好在html的書中,看到了可以使用標籤來實現。在這裡就直接上 了。lang en charset utf 8 name generator content editplus name author content name keywords content...