CSS3 背景的設計

2021-10-21 03:46:31 字數 799 閱讀 7100

div

在最基本的用法中是使用長度單位或者百分比來指定背景的尺寸,其中第乙個值是寬度,第二個值高度。如果只設定乙個值,則高度預設是auto。

在background-size還有兩個可選項:cover和contain。這兩個選項都不會造成影象比例失真。其中cover相當於寬度等於元素高度、高度設定auto的情況;而contain則相當於高度等於元素高度、寬度設為auto的情況。

在background-size: contain;中其等效於background-size: 100% auto;

在background-size: cover;中其等效於background-size: auto 100%;

background-origin屬性指定了的起始位置,在正常情況下背景是從內邊距的左上角開始延展的,而background-origin指定背景從哪個位置開始延展。

background-origin的相關屬性值為:

background簡寫屬性在乙個宣告中設定所有的背景屬性。

可以設定如下屬性:

如果不設定其中的某個值,也不會出現問題。

通常建議使用這個屬性,而不是分別使用單個屬性,因為這個屬性在較老的瀏覽器中能夠得到更好的支援,而且鍵入的字母也更好。

在css3中允許設定多個背景,每個背景佔一層,層的上下按照在css中書寫的順序來定,最先寫的背景在最上層,每層定義使用英文逗號分隔開。如果出現重疊,那麼寫在前面的會覆蓋在最上層。

相關**示例如下所示:

div

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...