RGBA颜色实现背景颜色透明而文字不透明

天崩地裂的心情

天崩地裂的心情

2016-02-19 23:30

下面是个RGBA颜色实现背景颜色透明而文字不透明教程,撑握了其技术要点,学起来就简单多了。赶紧跟着图老师小编一起来看看吧!

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)

一直以来,浏览器的透明一直无法实现 单纯的颜色透明,每次使用alpha后就会把透明的属性继承到子节点上。换句话说,很难实现背景颜色透明而文字不透明的效果,直到RGBA颜色的出现这一切将成为现实。

    实现这样的效果非常简单,设置颜色的时候我们使用标准的 rgba() 单位即可, 如rgba(255,0,0,0.4) 这样就出现了一个红色同时拥有alpha透明为0.4的颜色。

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)

    经过测试 firefox 3.0 safari 3.2 opera 10都支持了rgba单位,很可惜的是我们的ie系列,包括ie8都还没有很好的支持. 如果ie不加快这里的步伐,很快就会输掉这个浏览器的战争...

展开更多 50%)
分享

猜你喜欢

RGBA颜色实现背景颜色透明而文字不透明

Web开发
RGBA颜色实现背景颜色透明而文字不透明

CSS实现透明效果颜色的方法:RGBa

Web开发
CSS实现透明效果颜色的方法:RGBa

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

Photoshop制作透明和不透明汽泡教程

PS PS基础
Photoshop制作透明和不透明汽泡教程

解决父容器透明子容器不透明继承问题

Web开发
解决父容器透明子容器不透明继承问题

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

PS教程:图层不透明度

PS PS基础 PS抠图 PS调色 PS效果
PS教程:图层不透明度

妙手回春-逆转不透明度

PS PS基础 ps平面设计教程 ps去水印教程
妙手回春-逆转不透明度

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

远离CSS BUG 尽量保持代码有语义

远离CSS BUG 尽量保持代码有语义

支持Web标准在中国

支持Web标准在中国
下拉加载更多内容 ↓