第9章 元素的修饰与美化

color

颜色关键字

不支持的transparent关键字

color:transparent从IE9才开始支持。

不支持的currentColor变量

currentColor变量可以使用color计算值。

不支持的rgba颜色和hsla颜色

color属性支持十六进制颜色、rgb颜色。rgb除了支持数值颜色,还支持百分比rgb颜色,数值格式只能是整数,不能是小数。

color属性不支持hsl颜色、rgba颜色和hsla颜色。

hsl颜色:

支持却鸡肋的系统颜色

background

IE9+浏览器:

隐藏元素的background-image到底加不加载

IE8浏览器支持base64图片,包括在background-image属性中使用,可以节约网络请求。base64图片的渲染性能不高,大尺寸图片慎用。

与众不同的background-position百分比计算方式

如果缺省关键字,则会认为是centerbackground-position:top center=background-position:top

background-position:right 40px bottom 20px表示距离右边缘40px,距离下边缘20px

position百分比值计算公式:

positionX=(容器宽度 - 图片宽度)precentX
positionY=(容器高度 - 图片高度)
precentY

最终表现图片定位在容器内。

background-repeat与渲染性能

外强中干的background-attachment:fixed

background-attachment:fixed只能局限在窗体背景图使用上。

background-color背景色永远是最低的

利用多背景的属性hack小技巧

.bg {
    background: url("icon.png");
    background: url("icon.svg"), none;
}

渐变背景和rgba背景色的兼容处理

背景渐变,使用IE私有的渐变滤镜实现兼容

filter: progid:DXImageTransform.Microsoft.
gradient(startcolorstr=red, endcolorstr=blue, gradientType=1);

除了使用颜色关键色,还可以使用十六进制颜色值。

0~1的CSS3标准透明度值转换成十六进制。

Math.round(256 * opacity).toString(16);

实现一个100%红色到50%透明度蓝色垂直渐变。

.gradient {
    filter: progid:DXImageTransform.Microsoft.
    gradient(startcolorstr=#FFFF0000, endcolorstr=#7F0000FF, gradientType=0);
    background: linear-gradient(to bottom, red, rgba(0, 0, 255, .5));
}
.bgcolor {
    background: rgba(0, 0, 0, .5);
    filter: progid:DXImageTransform.Microsoft.
    gradient(startcolorstr=#7F000000, endcolorstr=#7F000000);
}

:root .bgcolor {
    filter: none;
}