CSS常用樣式 background

2022-06-21 23:57:08 字數 3054 閱讀 8869

參考:w3school- css background

所有瀏覽器都支援 background 屬性,其簡寫形式,在乙個宣告中設定所有的背景屬性,各屬性需按順序,語法如下:

selector
可設定如下屬性:值描述

cssbackground-color

規定要使用的背景顏色

1background-image

規定要使用的背景影象

1background-repeat

規定如何重複背景影象

1background-attachment

規定背景影象是否固定或者隨著頁面的其餘部分滾動

1background-position

規定背景影象的位置

1background-size

規定背景的尺寸

3background-origin

規定背景的定位區域

3background-clip

規定背景的繪製區域

3inherit

規定應該從父元素繼承 background 屬性的設定

1具體如下:

background-color

所有瀏覽器都支援 background-color 屬性。

background-color 屬性為元素設定一種純色。這種顏色會填充元素的內容、內邊距和邊框區域,擴充套件到元素邊框的外邊界(但不包括外邊距)。如果邊框有透明部分(如虛線邊框),會透過這些透明部分顯示出背景色。

如果不希望某元素擁有背景色,同時又不希望使用者對瀏覽器的顏色設定影響到設計,那麼可以設定'background-color: transparent;'。

js語法:object.style.backgroundcolor="顏色值"。

可能的值:

所有瀏覽器都支援 background-image 屬性。

background-image 屬性為元素設定背景影象。元素的背景佔據了元素的全部尺寸,包括內邊距和邊框,但不包括外邊距。預設地,背景影象位於元素的左上角,並在水平和垂直方向上重複。

注意:請設定一種可用的背景顏色,這樣的話,假如背景影象不可用,頁面也可獲得良好的視覺效果。

body

js語法:object.style.backgroundimage="url(stars.gif)"。

可能的值:

所有瀏覽器都支援 background-repeat 屬性。

設定是否及如何重複背景影象。預設地,背景影象在水平和垂直方向上重複。從原影象開始重複,原影象由 background-image 定義,並根據 background-position 的值放置(如果未規定 background-position 屬性,影象會被放置在元素的左上角)。

js語法:object.style.backgroundrepeat="repeat-y"。

可能的值:

所有瀏覽器都支援 background-attachment 屬性。

設定背景影象是否固定或者隨著頁面的其餘部分滾動。

js語法:object.style.backgroundattachment="fixed"。

可能的值:

background-position

所有瀏覽器都支援 background-position 屬性。

設定背景原影象(由 background-image 定義)的起始位置,背景影象如果要重複,將從這一點開始。

注意:您需要把 background-attachment 屬性設定為 "fixed",才能保證該屬性在 firefox 和 opera 中正常工作。

js語法:object.style.backgroundposition="center"。

可能的值:

ie9+、firefox 4+、opera、chrome 以及 safari 5+ 支援 background-size 屬性。

規定背景影象的尺寸。

js語法:object.style.backgroundsize="60px 80px"。

可能的值:

ie9+、firefox 4+、opera、chrome 以及 safari 5+ 支援 background-origin 屬性。

規定 background-position 屬性相對於什麼位置來定位。

注意:如果背景影象的 background-attachment 屬性為 "fixed",則該屬性沒有效果。

js語法:object.style.backgroundorigin="content-box"。

可能的值:

ie9+、firefox、opera、chrome 以及 safari 支援 background-clip 屬性。

規定背景的繪製區域。

js語法:object.style.backgroundclip="content-box"。

可能的值:

css 常用樣式

css 說的通俗一點就是 給標籤加樣式的。什麼玩意是樣式呢。你們可以理解為人穿的衣服,化妝之類的修飾,讓自己的寫的標籤變的好看一點 那麼這個css 怎麼加到對應的標籤上面去呢 有3種方法 分別是 外部樣式 內頁樣式 行內樣式。那麼這個css 怎麼加到對應的標籤上面去呢 有3種方法 分別是 外部樣式 ...

css常用樣式

格式調整 標籤的位置調整 text align center 絕對元素生成 position absolute margin right 微調上下左右 浮動 float 上下左右 width 寬 height 高 樣式調整 字型粗細 font weight size 字型格式 text decora...

CSS常用樣式

img box imgparentelement childelementfilter alpha opacity 60 filter progid dximagetransform.microsoft.gradient startcolorstr red,endcolorstr blue,grad...