仓酷云

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 1143|回复: 7
打印 上一主题 下一主题

[DIV+CSS] 来一发CSS完成通明效果色彩的办法:RGBa

[复制链接]
冷月葬花魂 该用户已被删除
跳转到指定楼层
楼主
发表于 2015-1-16 07:38:11 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
样式的调整更加方便。内容和样式的分离,使页面和样式的调整变得更加方便。
破洛洛文章简介:RGBa是一种在CSS中声明包括通明效果的色彩的办法.
RGBa是一种在CSS中声明包括通明效果的色彩的办法,它的语法是如许的:
  1. 123
复制代码
  1. div{background:rgba(200,54,54,0.5);}
复制代码
它同意我们为元素增加通明色。也许我们习气了利用”opacity“,它很复杂易用,可是,opacity会使一切的子元素都酿成通明的,并且很难往办理这个成绩。(除非利用奇异的定位hack)跨扫瞄器通明一样很是辣手。
经由过程RGBa,我们能够将一个元素设置为通明,而不会影响其子元素:

声明一个保存色彩

并不是一切的扫瞄器撑持RGBa,以是假如同意的话,能够声明一个保存色采。这个色采应当是牢靠的——一切的扫瞄器都撑持。不声明就意味着,在不撑持RGBa的扫瞄器内里,没有利用色彩。
  1. 1234
复制代码
  1. div{background:rgb(200,54,54);/*TheFallback*/background:rgba(200,54,54,0.5);}</code>
复制代码
不外,这条退路在某些古玩级扫瞄器中仍然有效。
RGBa的扫瞄器撑持情形

扫瞄器,版本,操纵体系测试了局退路Firefox3.0.5(OSX,WindowsXP,Vista)撑持—Firefox2.0.0.18(PC)不撑持纯色Safari4(DeveloperPreview,Mac)撑持—Safari3.2.1(PC)撑持—MobileSafari(iPhone)撑持—Opera9.6.1不撑持纯色IE5.5(PCviaIETester)不撑持无色IE6(PCviaIETester)不撑持纯色IE7不撑持纯色IE8beta2不撑持纯色GoogleChrome1.0.154.43撑持—GoogleChrome1.0.154.46撑持—Netscape4.8(PC)不撑持没有色彩SeaMonkey1.1.14不撑持无色SeaMonkey1.1.16不撑持纯色SeaMonkey2.0beta3撑持—Sunrise1.7.5撑持—Stainless0.2.5撑持&ndash;Flock2.0.2撑持&ndash;BlackBerryStormBrowser撑持纯色Camino1.6.6不撑持纯色下面的数据是经由过程测试demo失掉的,该测试页面包括了更多更完全的扫瞄器兼容性列表。
对IE扫瞄器的更好的退路

由于IE扫瞄器撑持前提正文,我们能够丢弃RGB并利用IE的一个公有CSS滤镜来完成一样的效果:
  1. 123456789
复制代码
  1. <!--[ifIE]><styletype="text/css">.color-block{background:transparent;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000050,endColorstr=#99000050);zoom:1;}</style><![endif]-->
复制代码
译自:css-tricks
一个样式规则由一个选择器后跟一个声明块组成,声明块是一个大容器,由大括号中间的部分组成,声明块中间的空间会被忽略。
柔情似水 该用户已被删除
沙发
发表于 2015-1-18 06:43:12 | 只看该作者
直接用代码建立链接,如:可以直接输入<aherf=\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"red.html\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\">红色的网页12、插入标签法建立链接,可以再选中文字后在代码中插入html标签,页元素<a>.也可以按ctrl+t进入html标签插入方法之后输入代码即可。
海妖 该用户已被删除
板凳
发表于 2015-1-26 15:36:07 | 只看该作者
Adobe Dreamweaver(前称Macromedia Dreamweaver)是Adobe公司的著名网站开发工具。
因胸联盟 该用户已被删除
地板
发表于 2015-2-4 20:40:38 | 只看该作者
在Dreamweaver里可以很轻松的完成图文混排、插入图片、插入Flash、插入音频、插入视频。
小女巫 该用户已被删除
5#
发表于 2015-2-10 09:23:44 | 只看该作者
学Dreamweaver技术的过程其实是一个增加信心的过程。
精灵巫婆 该用户已被删除
6#
发表于 2015-3-1 09:28:15 | 只看该作者
不管老师做怎样的解释,而我却对它感到很是吃力,诸如里面有许多不知道的功能。
小妖女 该用户已被删除
7#
发表于 2015-3-10 16:40:05 | 只看该作者
难以逾越的障碍会大大打击你的学习积极性。这就需要你的恒心,坚持不懈的决心。在自己无法解决某些问题时,就需要虚心请教别人.
乐观 该用户已被删除
8#
发表于 2015-3-17 09:10:16 | 只看该作者
布局表格、绘制层、制作CSS样式表等,这些内容迷糊了我的视线,真是没想到制作一个精巧别致的网页是如此的困难,可是心有不甘。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|仓酷云 鄂ICP备14007578号-2

GMT+8, 2024-5-10 08:54

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表