漸變色背景
`background-color: red yellow blue yellow; /* 格式: 上左顏色 上右顏色 下右顏色 下左顏色 */`
這個漸變填充的實現與 CSS3 標準不同, 能實現的效果也有限.
保持長寬比拉伸
`background: url(image.png) stretch keep-ratio;`
僅能在 stretch 模式中使用.
切片貼圖
~~~
background: url(bg.png) expand;
background-position: 6px 6px 6px 6px;
background-stretch: stretch-left stretch-middle stretch-right;
background 這行將bg.png 指定為背景圖, 并指定了貼圖的模式為 expand (切圖填充).
background-position 指定了切圖的位置(按上右下左的順序).
background-stretch 指定了切出來的圖的拉伸方式. 可用的參數有:
o stretch-left 拉伸左中切塊
o stretch-middle 拉伸正中切塊
o stretch-right 拉伸右中切塊
o stretch-top 拉伸上中切塊
o stretch-bottom 拉伸下中切塊
不寫 background-stretch 則默認使用平鋪貼圖方式處理.
~~~
前景樣式
~~~
foreground: red url(fg.png) no-repeat 50% 50%;
foreground-color: …
foreground-image: …
foreground-repeat: …
foreground-position: …
foreground-stretch: …
~~~
此屬性的語法與background 的對應屬性相同. 也支持切片填充.
前景樣式會覆蓋在背景和元素的內容之上.
圖像變換效果
~~~
foreground-image-transformation: colorize(#666);
background-image-transformation: contrast-brightness-gamma(0.5,0,0.5,1.2);
引擎支持對前景和背景圖像的多種變換效果.目前可用的變換效果有如下幾種:
o colorize(#FFCC00)顏色濾鏡效果
o contrast-brightness-gamma(0.5,0.5,1.5)對比度,亮度,gamma值調整. 對比度和亮度的中間值為 0.5.
o color-schema(red,yellow,blue)將圖像的灰度色部分按給出的顏色(可以有多個)進行插值變換.
colorize() 常用于實現按鈕圖標的禁用狀態.
contrast-brightness-gamma() 可用于鼠標懸停死的按鈕圖標變化.
~~~
