淘先锋技术网

首页 1 2 3 4 5 6 7

CSS可通过设置字体透明度来实现文本效果上的变化,包括使文本透明、半透明或变灰。使用opacity属性可以控制元素(包括文本)的不透明度,取值范围为0 - 1,其中0代表完全透明,1代表完全不透明,中间的值便是不同程度的透明。

/* 设置文本透明度为50% */
p {
opacity: 0.5;
}
/* 设置文本透明度为25% */
p {
opacity: 0.25;
}
/* 设置文本完全透明 */
p {
opacity: 0;
}

除了使用opacity属性外,还可以使用RGBA颜色值实现字体透明。RGBA颜色值由红、绿、蓝和透明度(alpha通道)的取值组成,透明度的取值范围同样为0 - 1。

/* 设置文字颜色为红色,透明度为50% */
p {
color: rgba(255, 0, 0, 0.5);
}
/* 设置文字颜色为绿色,透明度为25% */
p {
color: rgba(0, 255, 0, 0.25);
}
/* 设置文字颜色为蓝色,完全透明 */
p {
color: rgba(0, 0, 255, 0);
}

字体透明是一种很常用的效果,在设计中可以起到很好的装饰和调节效果的作用。但需要注意的是,如果给图片添加透明属性,IE浏览器只能支持透明度为数值的方式,也就是opacity属性。因此在使用的时候,需要针对不同浏览器进行兼容性处理。