css樣式學習 四

2021-10-12 07:37:38 字數 3274 閱讀 6954

顏色值通常以以下方式定義:

background-image 屬性設定乙個元素的背景影象。

元素的背景是元素的總大小,包括填充和邊界(但不包括邊距)。

預設情況下,background-image放置在元素的左上角,並重複垂直和水平方向。值說明

url('url')

影象的url

none

無影象背景會顯示。這是預設值說明

repeat

背景影象將向垂直和水平方向重複。這是預設

repeat-x

只有水平位置會重複背景影象

repeat-y

只有垂直位置會重複背景影象

no-repeat

background-image不會重複

inherit

指定background-repea屬性設定應該從父元素繼承值描述

scroll

背景隨著頁面的滾動而滾動,這是預設的。

fixed

背景不會隨著頁面的滾動而滾動。

水平表示   left 、center、right

垂直表示   top、center、bottom

如果僅指定乙個關鍵字,其他值將會是"center",不區分順序

x標識水平,y標識垂直 ,百分數值同時應用於元素和影象,預設為0% 0%

如果影象位於 0% 0%,其左上角將放在元素內邊距區的左上角。如果影象位置是 100% 100%,會使影象的右下角放在右邊距的右下角。

舉例

結果:

的66% 33%的點與元素body的66% 33%的點對應起來

與元素內邊距區左上角的偏移。偏移點是影象的左上角。

舉例  :

設定值為 50px 100px,影象的左上角將在元素內邊距區左上角向右 50 畫素、向下 100 畫素的位置上:

注意:這一點與百分數值不同,因為偏移只是從乙個左上角到另乙個左上角。也就是說,影象的左上角與 background-position 宣告中的指定的點對齊。

background-origin屬性指定background-position屬性應該是相對位置。  預設為padding-box

background-origin: padding-box|border-box|content-box;

如果背景影象background-attachment是"固定",這個屬性沒有任何效果

舉例:

背景影象邊界框的相對位置:

背景影象填充框的相對位置:

背景影象的相對位置的內容框:

結果

background-size: length|percentage|cover|contain;值描述

length

設定背景高度和寬度。第乙個值設定寬度,第二個值設定的高度。如果只給出乙個值,第二個是設定為 auto(自動)

percentage

將計算相對於背景定位區域的百分比。第乙個值設定寬度,第二個值設定的高度。如果只給出乙個值,第二個是設定為"auto(自動)"

cover

此時會保持影象的縱橫比並將影象縮放成將完全覆蓋背景定位區域的最小大小。

contain

此時會保持影象的縱橫比並將影象縮放成將適合背景定位區域的最大大小。

注意點

background-size屬性,該屬性可以設定背景的大小,該屬性的值設定為絕對數值或者百分比時對background-position沒有任何影響,當設定為contain/cover時就會產生影響,其中有乙個值會無效。

background-size:contain 該屬性會讓背景寬度或高度適應父元素,如果要縮放的話是等比例縮放,背景絕對不會超出父元素

background-size:cover 該屬性會讓背景填滿父元素,如果要縮放的話是等比例縮放,背景可能會超出父元素

當的寬度大於高度時,position的top值無效

當的寬度小於高度時,position的left值無效

background-clip: border-box|padding-box|content-box; 預設值為border-box

舉例:

沒有背景剪裁 (border-box沒有定義):

background-clip: padding-box:

background-clip: content-box:

結果:

總結屬性

作用值background-color

背景顏色

預定義顏色值/十六進製制/rgb**

background-image

背景url(路徑)

background-repeat

是否平鋪

repeat/no-repeat/repeat-x/repeat-y

background-attachment

背景附著

srcoll 滾動/fixed 固定

background-position

背景位置

length/percentage,px x座標,y座標

background-orign

背景相對元素的定位

padding-box|border-box|content-box ;預設padding-box

background-size

背景大小

length|percentage|cover|contain

background-clip

指定背景繪畫區域

border-box|padding-box|content-box; 預設值為border-box

背景簡寫

復合寫法

背景顏色 背景位址  背景平鋪  背景滾動  背景位置

背景色半透明

背景色半透明

background:rgba(0,0,0,0.3)   後面必須是四個值

CSS樣式(四) CSS定位

css定位 positioning 屬性 允許定義元素框相對於其正常位置應該改出現的位置,或者相對于父元素 另乙個元素甚至瀏覽器視窗本身的位置。一切皆為框 1 塊級元素 div h1或p標籤 即 顯示為一塊內容稱之為 塊框 2 行內元素 span,strong,a等元素 即 內容顯示在行中稱 行內框...

css基礎樣式四

上次我們講到了相對定位 這次我們了解下絕對定位 絕對定位 絕對定位會脫離文件流。所以之前的位置就會被後面的內容給填補 絕對定位的元素的位置相對於最近的已定位祖先元素,如果元素沒有已定位的祖先元素,那麼它的位置相對於最初的包含塊。浮動 如圖 浮動也會像絕對定位那樣脫離文字流,就相當於飄了起來,在天上,...

css樣式學習?

在要用時選取那段文字,再在css面板上點一下 bgstyle 就行了。8 如何給部分文字加背景影象?與加背景色操作類似,中是在背景在選擇載入圖象就是了,乙個定義好的加背景圖象的css例子的 是這樣的 在要用時選取那段文字,再在css面板上點一下 imgbgstyle 就行了。9 如何使頁面的背景在文...