超大的背景

2021-08-31 14:58:23 字數 2316 閱讀 9772

body
演示一展示了在一張頁面裡設定一張1280*960畫素大小的固定位置的居中背景

圖(它並不隨著文件的滾動而滾動)。

那麼到底多大尺寸的才是足夠的呢?顯示器和作業系統的換代速度是非常快的,其結果就是現在有非常多的螢幕解析度需要我們去應付。現在最常見的是1024x768px, 1280x800px, 1280x1024px, 和 1440x900px。並且,當高畫質螢幕(1920x1080px)和支援高達2560x1600px解析度的專業顯示器來臨的時候,我們會面臨幾乎所有可能的解析度情況。

另外我們還需要考慮到低版本瀏覽器的情況。儘管現在一系列的瀏覽器只支援800x600px的解析度,但他們的使用者還是會常常並不全屏設定他們的瀏覽器。況且我們目前還沒談及那些更低解析度的手持終端的螢幕。

相對於使用一張固定作為背景

,更好的作法是能將進行自動縮放以適應任何解析度的螢幕。不幸的是,css 2.1的版本並未對背景圖縮放提供任何方法。

針對這個問題曾經有兩個解決辦法[1、2],但他們都依賴於html裡的img元素(替代css裡的背景圖)。它們還對層和**使用絕對定位或用指令碼**來實現的縮放功能。另外,不是所有的這樣技術都能一直保持原有的比例,最終會為了單純的延伸以適應螢幕而變得面目全非。

css3 背景技術帶來的拯救

w3c css3的背景及邊框模型(目前的工作草案)明確定義了新的復合開發者需求的background-size屬性。我們會關心的屬性有(w3c詳情):

contain

在保持原有長寬比(如果有的話)的情況下,最完整地(to the largest size)縮放(不剪裁)直到其寬和高都能填充進(fit inside)容器的背景設定區域。

cover

在保持原有長寬比(如果有的話)的情況下,最貼切地(to the smallest size)縮放(注:剪裁)直到其寬和高都能完整覆蓋(completely cover)容器的背景設定區域。

contain屬性值總是在視覺區域內顯示完整的,當顯示區域的長寬比不同於的長寬比,會用不透明的邊框來填充餘下的部分。見演示二。

cover屬性值總是將填滿整個瀏覽器視窗,當顯示區域的長寬比不同於的長寬比,它會剪裁掉多餘的四周。你可以使用background-position屬性來設定背景圖在視窗中的定位方式。見演示三。

你可以通過在樣式表中新增下面的宣告來設定背景的縮放:

body
firefox3.6(需要加-moz字首,而從firefox4開始將支援常規的無需加字首的css3屬性)、chrome 5、safari 5以及opera 10.54等版本已經可以支援background-size屬性,ie9也將支援這一屬性(在目前的preview 3版本中已經得到了應用)。老一些的webkit和opera版本的瀏覽器已經支援了這一屬性,但它們所履行的標準是基於尚無contain和cover屬性值的原草案。

這個方法的缺陷是沒有屬性可以為一張設定最小的寬、高值。當有人將他的瀏覽器視窗調整到非常小的時候,背景也會隨之而變得非常小。設計師們可能並不喜歡這種情況,因為那會使得背景過小而變得無法辨認。

新增css3媒介裝置查詢的**組合

css3媒介裝置查詢( w3c css3 media queries module,乙個候選建議)以明確的寬度或高度為設定規則的條件。這令我們可以實現過小的視窗不必縮放背景圖。媒介裝置查詢技術目前支援的瀏覽器有firefox 3.5、chrome、safari 3以及opera 7,未來的ie9也會支援這一技術。

使用下面的**我們可以在解析度小於1024×768畫素的時候不必縮小背景:

body 

@media only all and (max-width: 1024px) and (max-height: 768px)

}

注意1024×768畫素的解析度同背景(1280x960px)的長寬比是相同的,如果不同會在調整瀏覽器視窗大小時隨著背景圖的縮放產生突然的跳躍。

在最後的演示中,演示四和演示五,因為加入了@media規格,所以我們的背景圖在小於1024×768畫素的情況不會繼續縮放。演示五定義了background-position屬性使得背景圖不是居中顯示而是沿著左下角顯示,我們可以控制在視覺範圍內對齊的方式。

回視老技術

隨著所有的瀏覽器廠商都在抓緊開發支援即將實施的html5和css3技術的瀏覽器,當下正是所有web開發人員興奮的時刻。因為同傳統的老技術相比,我們會看到新的技術是多麼的靈巧和簡潔。相比於firefox、chrome、safari和opera的快速更新週期,我們來看看究竟還有多久人們才能使用上ie9會是件有趣的事情,因為很快我們能大規模的應用這些新技術了。

超大整數相加

輸入 第乙個數字m代表接下來有幾組資料 接下來每一組資料報含兩個資料,數字很大哦 確保沒有字首0,資料很大 輸出輸出計算後的結果,每個結果佔一行 樣例輸入 3123 456 1234567890987654321 9876543210123456789 11111111111111111111111...

實現超大整數的方法

前幾天做的產品測試,發現內建最大的整數值只有10的9次方,沒有實現超大整數的功能。現在海量計算和海量儲存應用越來越多,而且已經有很多人實現了超大整數的儲存和運算,調查了一些這方面的方法,根本上都是自定義乙個多位元組的資料結構,以便對程式語言的內建int型做擴充套件。自定義結構的方式儘管人人不同,但是...

超大檔案的copy

超大檔案的copy 一 幾g或幾十g的檔案的copy 例如需要拷貝exe,iso到遠端的機器上,我們可以使用如下的方法 多執行緒copy 1 split copy cat split and cat are linux command,you can get them from unxutils 2...