CSS揭秘 3 靈活的背景定位

2021-10-07 03:05:42 字數 992 閱讀 7712

背景知識:background-position的擴充套件語法,background-origin,calc()

background-position擴充套件語法:css3 中background-position 語法可以通過在偏移量前指定關鍵字,來設定四條邊的偏移量。
background-positon

: right 20px bottom 10px;

background-origin:css3 中 background-origin 可以指定背景的顯示範圍,預設以padding-box為準,即padding的外邊沿。此時背景的位置將和padding一致。通常此方案更適合開發需求。
padding

:20px;

background-origin

: content-box;

background-position

: 100% 100%;

calc():允許填入 任意+ - * /四則運算組合的表示式。
background-position

:calc

(100% - 20px)

calc

(100% - 10px)

;

擴充套件:border-box邊框的外邊沿;padding-box內邊距的外邊沿;content-box內容的外邊沿。

CSS揭秘 條紋背景

不管是線性漸變,還是徑向漸變。它們都是用來設定元素的背景影象。background image屬性可以為乙個元素設定乙個或者多個背景影象。這些影象在繪製過程中,以z方向堆疊的方式進行,也就是先指定的影象會在後指定的影象上面繪製,也就越接近使用者。元素的border會在背景影象之上繪製 別忘了前面講的...

CSS揭秘之《條紋背景》

先來說說漸變吧 background linear gradient fb3 20 58a 80 效果圖如下所示 也就是說真正的漸變只出現在容器 60 從20 到80 的高度區域 如果把兩個色標合在一起,會怎樣呢 w3c是這樣規定的 如果多個色標具有相同的位置,它們會產生乙個無限小的過渡區域,過渡的...

CSS揭秘 背景與邊框

css編碼技巧 font size 20px line height 1.5 1.半透明邊框 border 10px solid hsla 0,0 100 5 background white background clip padding box 2.多重邊框 background yellowg...