結合實踐再認識background

2021-08-02 09:11:11 字數 1577 閱讀 6035

background為css的乙個基本屬性,使用頻率很高,可以設定背景色、背景。

background是乙個復合屬性,為幾個屬性的縮寫形式。縮寫格式為:background:color img position/size repeat attachment clip origin。

接下來,著重結合實踐經驗來選擇性的介紹其中幾個屬性:

一、background-position

3、方位值:left/top等方位值,指的是背景的相應軸線與元素的相應軸線對齊。如background-position:left center表示背景的左軸、中軸分別與元素的左軸、中軸對齊。

二、background-attachment

background-attachment描述了背景隨著元素滾動的滾動情況。預設值為scroll,即背景隨著元素的滾動而滾動。

另外乙個值為fixed,表示背景不隨元素的滾動而滾動。實際上,fixed定位的背景圖是相對於瀏覽器視窗定位的,與元素的position:fixed類似。並且fixed背景的百分比定位是相對於視窗寬高的百分比,與元素大小已經沒有了關係。

在元素中固定定位背景,則背景僅在該元素區域內能看到。根據該原理,可以製作炫酷的視差滾動效果。遺憾的是,fixed定位在移動端支援性不好,所以在移動端要實現類似的視差滾動的話,只能另闢蹊徑,方法有很多,其中,可以用固定定位的元素來模擬固定定位的背景以實現效果。

三、background-size

該屬性為css3屬性,ie低版本不支援,其他瀏覽器也需選擇性的加瀏覽器字首來相容。

background-size:cover是用的比較多的屬性,將背景等比縮放來鋪滿元素區域。

實踐中踩過不少坑,做下總結:

1、body元素設定background-size:cover時,body高度大於視窗高度,但背景僅僅鋪滿了視窗,但沒鋪滿視窗以外的body區域。

很坑爹……經過很大周折,終於搞明白了,原來與html元素有關:

(1)當html設定了高度(如100%),則背景是相對於html區域來cover的,不再是body區域;

(2)當html不設定高度,此時,背景cover區域正常,是相對於body的。

(3)當html設定了背景色,無論有沒有設定高度,則body的背景cover是在body區域內進行的,不再受html影響。

2、cover雖然意味著背景鋪滿元素區域,但也不總是這樣,會受到background其他屬性background-position的影響。當background-position的值為固定值時,如background-position:10px 10px,則背景是以該點為起始點來進行平鋪的,該點以上以左的區域是覆蓋不到的。當「background-position:-10px 0」時,覆蓋區域大小仍等於元素大小,但是因起始點偏離了元素左側10px,故元素最右側10px寬的區域被覆蓋不到,相當於cover的背景向左側移動了10px,有10px寬被移到了元素的外部。

總之,background各屬性間是相互影響的,使用時應多加注意。主要每個屬性都掌握了,復合應用時也就不容易出問題了。

在專案中會遇到各種各樣的問題,事無鉅細,多總結多積累~

快樂再認識

整理十一月份的東西,發現以下對話很有價值,於是決定貼在這裡 問 快樂是什麼?答 在我的認識裡,快樂有兩種,消費型和創作型。消費型快樂不會持久的,應該追求後者。問 可不可以這樣理解,消費型快樂即是客觀型快樂,創作型快樂即是主觀型快樂。答 不好用主觀與客觀來分,因為快樂都是主觀的。我覺得可以用快樂的程度...

windows程式設計再認識

昨天和前天,基本完成了對windows程式設計的基礎認識,並且也寫了一些在windows程式設計裡面十分簡單的 今天 繼續學習!還是一段 class cmainwindow public cframewnd begin message map cmainwindow,cframewnd 開始訊息對映...

對Integer的再認識

為了節省記憶體,對於下列包裝物件的兩個例項,當它們的基本值相同時,他們總是 boolean byte character,u0000 u007f 7f是十進位制的127 integer,128 127 jdk6 api valueof public static integer valueof in...