网页制作必知：初探CSS3的RGBA颜色

2016-02-19 19:46 3 1 收藏

下面图老师小编跟大家分享一个简单易学的网页制作必知：初探CSS3的RGBA颜色教程，get新技能是需要行动的，喜欢的朋友赶紧收藏起来学习下吧！

【 tulaoshi.com - Web开发】

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

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

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

来源:http://www.tulaoshi.com/n/20160219/1621745.html

上一篇： CSS清除浮动的三个方法
下一篇：在爱情的起跑线上,谁先爱上谁谁就是最大的输家

看过《网页制作必知：初探CSS3的RGBA颜色》的人还看了以下文章更多>>

CSS3教程(7):CSS3嵌入字体

标签： Web开发

想要制作一些很酷的头部效果而且摆脱网站安全字体并且不使用图片文件？那么就使用CSS3嵌入字体吧！上一篇：CSS3教程(6):创建网站多列要使用一款字体，我们首先需要使用‘@font-face’属性。这必须先准备好我们要用的字体文件。尽管这样，让我们简单的学习一下字体方面的历史。@font-face属性从CSS2就已经考虑了，但却始终在...

CSS3教程(1):什么是CSS3

标签： Web开发

CSS3不是新事物，更不是只是围绕border-radius属性实现的圆角。它正耐心的坐在那里，已经准备好了首次登场，呷着咖啡，等着浏览器来铺上红地毯。你看，浏览器需要跟上了注意：浏览器需要改进尽管把玩CSS3是很有趣的事情就像接下来我要演示的几篇教程中表现的那样，但是需要了解的是，CSS3并没有被当前浏览器完全的支持。也就是说，如...

使用CSS3改变文本选中的默认颜色

标签： Web开发

关于浏览器文字选中颜色以我的系统举例（xp 默认主题），浏览器上页面文字选中后默认的背景色是一种蓝色，不同浏览器的颜色有些许差异，但大致相同，文字颜色也近乎白色，如下图所示，截自Firefox3.6浏览器：在CSS3的爸爸妈妈还没有相亲认识的时候，要改变页面上文字选中后的背景色以及文字颜色，就跟让太监生孩子一样困难。但是，随着CSS...

网页美工应该了解的CSS3新技术

标签：平面设计海报设计广告设计画报设计签名设计服装设计名片设计画册设计版式设计商标设计

1：基本标记在我们开始这个教程之前，先来创建整个教程都要使用的基本标记。我们的xHTML需要一下div元素: #round, 使用CSS3代码实现圆角. #indie, 应用个别的几个圆角. #opacity, 展示新的CSS3实现不透明度的方式. #shadow,展示不使用Photoshop的情况下，使用CSS3来实现阴影效果. #resize, 展示如何使用某种CSS来实现重设大小的效...

用css3制作纸张效果

标签： Web开发

一、中规中矩的效果所谓中规中矩的效果就是加个投影，贴个胶带什么的。效果如下：您可以狠狠地点击这里：中规中矩纸张效果demo 这里纸张本身的效果没有什么说头的，就是个CSS3的 box-shadow投影效果而已，相关代码如下： -moz-box-shadow: 0 2px 10px 1px rgba(0, 0, 0, 0.2);-webkit-box-shadow: 0 2px 10px 1px rgba(0, 0, 0, 0.2);...

查看更多精彩>>