Css3中的背景

2021-05-31 21:46:14 字數 1421 閱讀 9716

css3對背景作了很多改變,最明顯的是可以選擇多重背景,同時它也增加了四個新的屬性。

多重背景

css3中,對乙個元素可以使用一張以上的背景。除了使用逗號將分開以外,其**與css2相同。第乙個宣告的定位在元素的頂部,接下來的層列於下,像這樣:

該屬確定背景畫區,有以下幾種可能的屬性:

background origin

它通常與background-position聯合使用,你可以從border、padding、content來計算background-position(就像background-clip)。

background size

background-size常用來調整背景的大小,有以下可能的屬性:

background break

css3中,元素可以被分割成單個的盒子(例如,使乙個內聯的span元素多行排列),background-break 屬性控制背景跨越多個盒子如何顯示。

改變background-color

css3對背景顏色有輕微的加強,除了定義背景顏色之外,你還可以定義乙個備用顏色,它在元素最底層的不能使用時得以生效。如:

1.background-color:green/blue;

在這個例子中,背景顏色為green。但是,如果最底層的不能使用,背景顏色將是blue。如果沒有定義顏色,就假定是透明的(transparent)。

改變background repeat

在css2中,當重複時,它經常在元素的底部切斷。css3引入兩個新的屬性修復它。

改變background attachment

background-attachment 有乙個可能的屬性值:local。它通常與能滾動的元素(如:overflow:scroll)一起發揮作用。當background-attachment 為scroll時,元素內容滾動時背景不會滾動。background-attachment為local時,元素內容滾動時背景會跟著滾動。

css3 動態背景

動態背景 利用多層背景的交替淡入淡出,實現一種背景在不停變換的效果,先看圖。效果圖 demo位址 步驟 1.利用css的radial gradient建立乙個映象漸變的背景。其中的80 20 為漸變中心的x,y位置。具體的radial gradient用法可以參見這裡 2.重複第一步建立4個擁有不同...

CSS3邊框背景

邊框背景 border image 邊框背景主要是用來給元素邊框新增背景影象,本質是用一張來修飾邊框背景,看下圖效果 用左邊來完成右邊的效果 先看一下邊框背景的引數 border image image boeder width 引數可寫1 4個 填充方式 stretch repeat round ...

CSS3背景屬性

background是乙個使用率很高的屬性,也是乙個非常有用的屬性。背景主要包括5個基本屬性 background color 背景顏色 background image 背景 background repeat 背景展示方式 background attachment 背景是固定還是滾動 back...