CSS3 RGBA颜色类型不等于RGB与opacity相加

DIV+CSS 21NN 4个月前 (05-24) 21次浏览 已收录 0个评论 扫描二维码
文章目录[隐藏]
当前位置 :|
建站学>网页设计>css 设计教程> CSS3 RGBA 颜色类型不等于 RGB 与 opacity 相加

 建站教程导航

网站策划

  • 建站理念与思路
  • 确定网站主题
  • 网站内容规划
  • 网站标题,关键词和描述
  • 网站的风格和创意
  • 建站心得与技术巧门
  • 用户体验

建站基础

  • 网站域名
  • 网站空间
  • 提交网站备案
  • FTP 工具下载与使用

网页设计与设计

  • 色彩原理与网页配色
  • 网页设计
     · fireworks(教程);
     · photoshop(教程)
     · flash(教程)

     · 素材(下载)
  • 网页设计
     · Dreamvever(教程)
     · HTML(教程)
     · XHTML(教程)
     · DIV+CSS(教程)
  • 网页特效

网站功能开发

  • 开源系统建站
     · 源码
     · 模板
     · 教程
  • WEB 常用编程语言
     · ASP(交流)

     · PHP(教程)
     · asp.net
     · JSP
     · XML/XSLT
     · javascript(教程)
     · Ajax(教程)
     · jQuery 教程
  • WEB 常用数据库

     · 数据库综合
     · MSSQL SERVER

     · MYSQL
     · oracle

网站维护与内容建设

  • 网站内容编辑
  • 网站内容采集
  • 服务器管理
     · Web 服务
     · Windows 教程

     · Linux 教程
     · 集群、安全与缓存

网站推广与运营

  • SEM
  • SEO 搜索引擎优化 交流>>
  • 网站综合推广
  • 网站数据统计与分析
  • 网站运营策略与技术巧门

网站赚钱

  • 网站赢利模式
  • 网络广告联盟
  • 淘宝客赚钱
  • Google adsense 赚钱

CSS3 RGBA 颜色类型不等于 RGB 与 opacity 相加

时间:2011-03-30

相关文章:
  • HTML 代码技术巧门:HTML 注释表达式判断 IE 版本
  • CSS 网页设计技术巧门:图片的自适应居中和兼容处
  • css3 设计网页实例:点击切换不同的 CSS 列表
  • css-sprite 适用的条件:对 css-sprite 的理解
  • CSS3 实例资源收集:11 个 CSS3 开发实用工具
  • 从四个方面谈谈 Web 标准的价值所在
  • 控制网页文件大小通过精简 CSS 实现
  • css 的语法
  • 怎样插入 CSS 样式表
  • 什么是 css
  • 这里我们学习 CSS3 RGBA 颜色类型,使用它不等于 RGB 与 opacity 相加 。

    想想不使用 CSS3,我们是怎样满足“背景透明,文字(内容)不透明”这种需求的?

      例如现在有个需求:

    1. 有个长 300px,高 100px 的 div 在 body 为红色的页面中;
    2. 该 div 拥有不透明度为 50%的黑色背景颜色;
    3. 该 div 内容不允许出现半透明效果,且文字为白色。

      根据该需求中的 3 点要求,我们需要得出的效果应如下图:

      CSS3 RGBA 颜色类型不等于 RGB 与 opacity 相加
      Figure 1: 背景透明内容不透明

    根据需求里的已知条件,我们代码如下:

    body{
    background:#f00;
    }
    #opacity{
    width:400px;
    height:100px;
    background-color:#000;
    color:#fff;
    filter:alpha(opacity=50); /* For IE */
    opacity:.5;
    }

    怎样实现背景透明,内容不透明?

      运行这段代码后,效果与需求 3 不符合,内容也随着容器成了半透明的,看其效果如下图:

      CSS3 RGBA 颜色类型不等于 RGB 与 opacity 相加
      Figure 2: 内容也半透明了

      有经验的前端工程师知道,要达到需求所述的效果,上面的代码需要做些许变动:

    1. 如果仅需满足 IE,那么在原有的结构上加多一层,并将其设置为 position:relative。效果如下:

    CSS3 RGBA 颜色类型不等于 RGB 与 opacity 相加

    2.兼容大部分浏览器的处理方式:这也需要加多一层,不过要与原结构“同级”。效果如下:

    CSS3 RGBA 颜色类型不等于 RGB 与 opacity 相加

      以上 2 中方式,其中 only ie 的自然是不可取的,因为这是前端工程师的职责所在,我们必须使得大部分用户能得到相同的体验,而不仅仅是某个范围。

    上一页12 下一页

    推荐教程:
  • DIV+CSS 总结:有用的 3 个网页设计技术巧门
  • 详解 CSS 中 background(背景)属性的语法
  • 用 CSS 美化 input file 按钮的办法
  • 【DIV+CSS 入门教程】DIV+CSS 的叫法是不准确
  • 一步步教你实现纯 CSS 的柱形图
  • CSS 常见问题及小技术巧门汇总
  • CSS3 入门教程(4):关于阴影
  • 9 个精简优化 CSS 文件的技术巧门
  • CSS3 RGBA 颜色类型不等于 RGB 与 opacity 相加
  • 发现 css 中出现的 bug 以及修复办法教程
  • 最新评论:

    CSS3 RGBA 颜色类型不等于 RGB 与 opacity 相加
    评论加载中….
    发表评论:
    评论内容:不能超过 250 字,需审核,请自觉遵守互联网相关政策法规。
    用户名:
    验证码:

    返回页首

    建站论坛热门话题

    当前位置 :|
    建站学>网页设计>css 设计教程> CSS3 RGBA 颜色类型不等于 RGB 与 opacity 相加 (2)

     建站教程导航

    网站策划

    • 建站理念与思路
    • 确定网站主题
    • 网站内容规划
    • 网站标题,关键词和描述
    • 网站的风格和创意
    • 建站心得与技术巧门
    • 用户体验

    建站基础

    • 网站域名
    • 网站空间
    • 提交网站备案
    • FTP 工具下载与使用

    网页设计与设计

    • 色彩原理与网页配色
    • 网页设计
       · fireworks(教程);
       · photoshop(教程)
       · flash(教程)

       · 素材(下载)
    • 网页设计
       · Dreamvever(教程)
       · HTML(教程)
       · XHTML(教程)
       · DIV+CSS(教程)
    • 网页特效

    网站功能开发

    • 开源系统建站
       · 源码
       · 模板
       · 教程
    • WEB 常用编程语言
       · ASP(交流)

       · PHP(教程)
       · asp.net
       · JSP
       · XML/XSLT
       · javascript(教程)
       · Ajax(教程)
       · jQuery 教程
    • WEB 常用数据库

       · 数据库综合
       · MSSQL SERVER

       · MYSQL
       · oracle

    网站维护与内容建设

    • 网站内容编辑
    • 网站内容采集
    • 服务器管理
       · Web 服务
       · Windows 教程

       · Linux 教程
       · 集群、安全与缓存

    网站推广与运营

    • SEM
    • SEO 搜索引擎优化 交流>>
    • 网站综合推广
    • 网站数据统计与分析
    • 网站运营策略与技术巧门

    网站赚钱

    • 网站赢利模式
    • 网络广告联盟
    • 淘宝客赚钱
    • Google adsense 赚钱

    CSS3 RGBA 颜色类型不等于 RGB 与 opacity 相加 (2)

    时间:2011-03-30

    相关文章:
  • HTML 代码技术巧门:HTML 注释表达式判断 IE 版本
  • CSS 网页设计技术巧门:图片的自适应居中和兼容处
  • css3 设计网页实例:点击切换不同的 CSS 列表
  • css-sprite 适用的条件:对 css-sprite 的理解
  • CSS3 实例资源收集:11 个 CSS3 开发实用工具
  • 从四个方面谈谈 Web 标准的价值所在
  • 控制网页文件大小通过精简 CSS 实现
  • css 的语法
  • 怎样插入 CSS 样式表
  • 什么是 css
  •   至于第二种,这是现在比较流行的处理方式。不过这种方式也不是那么完美,这个缺憾表现在:

    1. 代码量增加:需加多额外一层无意义标签;与此同时,相应的 CSS 代码也将增加
    2. 不灵活:由于新增的一层与内容层是并级的,所以新增层的宽高不能动态的随着内容层的中内容的增减而变化。

      这个时候 CSS3 RGBA 的优势就体现出来了,从字面看,RGBA = RGB + alpha。但事实上 RGBA 并不是简单的 RGB 与 alpha 的相加。请看例子 CSS3 RGBA color 详解中几种颜色类型的对比。

    CSS3 RGBA 颜色类型不等于 RGB 与 opacity 相加

      我们知道 opacity(IE 下用 filter:alpha(opacity=??))是让整个元素渲染成半透明的效果,而不能单独指定是否只有颜色为半透明。我想这也许正是 RGBA 和 HSLA 这种类型颜色的出现原因。

      RGBA 的语法非常简单,如果你熟悉 RGB 颜色话。

      rgba(0-255,0-255,0-255,0-1) 这就是 RGBA 的语法,前三个参数为色调,取值可在 0-255 之间,第四个参数则为 alpha,取值为 0-1 之间。

    以上面的需求第 2 点为例,用 RGBA 可以这样表示

    background-color:rgba(0,0,0,.5);

      这样就只有背景色为半透明,其它的俱不受影响。最大的问题被轻松搞定,那整个需求即变得异常简单起来,迟疑什么?立即看看用 CSS3 RGBA 实现的背景透明内容不透明效果吧。

    CSS3 RGBA 颜色类型不等于 RGB 与 opacity 相加

    而之前在第二种实现方案中所提及的 2 个缺憾,在 RGBA 的实现方案中,似乎根本不存在。

      现在相信你也能体会到 RGBA 这种颜色类型的强大力量。CSS3 离你还远吗?

    上一页 1 2下一页

    推荐教程:
  • DIV+CSS 总结:有用的 3 个网页设计技术巧门
  • 详解 CSS 中 background(背景)属性的语法
  • 用 CSS 美化 input file 按钮的办法
  • 【DIV+CSS 入门教程】DIV+CSS 的叫法是不准确
  • 一步步教你实现纯 CSS 的柱形图
  • CSS 常见问题及小技术巧门汇总
  • CSS3 入门教程(4):关于阴影
  • 9 个精简优化 CSS 文件的技术巧门
  • CSS3 RGBA 颜色类型不等于 RGB 与 opacity 相加
  • 发现 css 中出现的 bug 以及修复办法教程
  • 最新评论:

    CSS3 RGBA 颜色类型不等于 RGB 与 opacity 相加
    评论加载中….
    发表评论:
    评论内容:不能超过 250 字,需审核,请自觉遵守互联网相关政策法规。
    用户名:
    验证码:

    返回页首

    建站论坛热门话题


    乐趣公园 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
    转载请注明原文链接:CSS3 RGBA 颜色类型不等于 RGB 与 opacity 相加
    喜欢 (0)
    [1353713598@qq.com]
    分享 (0)
    关于作者:
    发表我的评论
    取消评论
    表情 贴图 加粗 删除线 居中 斜体 签到

    Hi,您需要填写昵称和邮箱!

    • 昵称 (必填)
    • 邮箱 (必填)
    • 网址