CSS學習筆記(四) 背景

2021-10-05 00:00:00 字數 1019 閱讀 6046

通過background-color設定背景顏色,值可以為rgb通道或者顏色編碼,rgb通道可以設定透明度

article

article

article

通過background-image設定背景,注意不會撐開元素,不會改變元素大小

在預設情況下,背景會填充整個border內部,通過背景裁剪可以限定背景的填充範圍,通過background-clip進行背景裁剪設定。

有以下值:

當背景小於填充範圍的時候,缺省會進行重複,可以通過background-repeat進行的設定

當子元素大於父元素的時候,在父元素中設定overflow為auto自動設定滾動條。

當在子元素中設定background-attachment為fixed,背景將會固定,不隨滾動條移動

通過backgrounf-size設定背景大小,

article
通過background可以進行復合定義

通過box-shadow設定盒子陰影

box-shadow:10px,10px, 10px,rgb(192, 30, 111);

/*值分別為x軸,y軸陰影偏移,模糊度,陰影顏色*/

background:linear-gradient(90deg,color1,color2,color3)設定漸變,顏色平均,從上到下漸變。

線性漸變:

linear-gradient的第乙個引數可以新增角度數值,設定漸變的方向

映象漸變:更換函式:radial-gradient,和線性漸變函式的區別是,該函式的第乙個值可以新增映象部分的大小,映象點的位置。

設定漸變範圍:

background:linear-gradient(90deg,color1 50%,color2 60%,color3 70%)

兩個標誌位中間顏色改變的位置,在兩個顏色中間是填寫中間點位置

當漸變區域的背景小於元素大小的時候,設定repeat,就會產生重複效果

css學習筆記 背景

background 設定元素的背景 背景顏色與背景可以同時設定 background position 設定從背景的什麼位置開始填充,按水平與垂直方向設定 可選值 top left right bottombackground position left top 也可以通過畫素來設定backgro...

CSS學習筆記 背景

background color 屬性定義了元素的背景顏色。頁面的背景顏色使用在body的選擇器中 charset utf 8 prcorangetitle h1p divstyle head css background color 例項 h1 改文字插入在 div 元素中。該段落有自己的背景顏色...

CSS3學習筆記 背景

背景 background color backgound image backgound position backgound 背景是固定的 背景是固定的 背景是固定的 背景是固定的 背景是固定的 背景是固定的 背景是固定的 背景是固定的 背景是固定的 背景是固定的 背景是固定的 1 backgo...