渐变色背景
`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() 可用于鼠标悬停死的按钮图标变化.
~~~
