透明度css

DEMO： /*--> */ /*--> */ AB Angel Beats! SAO Sword Art Online GTO Great Teacher Onizuka TRC Tsubasa Reservoir Chronicle D.C. Da Capo tootip这个东西，真是什么地方都用得着，这段时间就不可避免的遇到了。 首先考虑一下tooltip的基本表现： 移动到某个元素上就会弹出的元素 这应该是最简单的tooltip了。 首先是移动到某个元素上触发效果，这里想必会用到 :hover 伪类。但是对其作出反应的却是另外一个元素，这里就需要实现一个联动的效果，最简单的方法，那就是嵌套咯，用外层元素做容器，使用 :hover 伪类派生的方法来让容器内部的元素也发生变化，在这儿就是让tooltip显示出来喽～ 于是，就先来弄几个个自带容器的tooltip吧。 HTML: <div class="tooltip-wrapper"> <span><a href="#">AB</a><span class="tooltip">Angel Beats!</span></span> <span><a href="#">SAO</a><span class="tooltip">Sword Art Online</span></span> <span><a href="#">GTO<

最近在阅读《CSS揭密》一书，将学习过的内容自己简单纪录一下，只为了加深一下子自己的记忆，方便学习，大家感兴趣的可以去看一下这本书。 半透明边框 背景知识 rgba()、hsla()颜色 RGBA 说明： RGBA(R,G,B,A) 取值： R：红色值。正整数 | 百分数 G：绿色值。正整数 | 百分数 B：蓝色值。正整数 | 百分数 A：Alpha透明度,取值0~1之间。 RGBA记法 此色彩模式与RGB相同，只是在RGB模式上新增了Alpha透明度。 IE6.0-8.0不支持使用 rgba 模式实现透明度，可使用 IE 滤镜处理 HSLA 说明： HSLA(H,S,L,A) 取值： H：Hue(色调)。0(或360)表示红色，120表示绿色，240表示蓝色，也可取其他数值来指定颜色。取值为：0 - 360 S：Saturation(饱和度)。取值为：0.0% - 100.0% L：Lightness(亮度)。取值为：0.0% - 100.0% A：Alpha透明度。取值0~1之间。 说明： HSL记法 此色彩模式与HSL相同，只是在HSL模式上新增了Alpha透明度。 兼容性： 浅绿 = 支持 红色 = 不支持 粉色 = 部分支持 难题 半透明颜色是2009年发生的一场重大变革。从那次之后，人们可以在挖网页设计中使用它们，但是为了尝鲜还需要付出额外的代价，比如我们要做好回退

给平淡的站点带来活力 hover效果能给网页增加一些动态效果，并且使得站点更具有活力。原来的做法是使用javascript来实现这些动态效果，但是随着CSS3的引入和现代浏览器的支持，我们可以用纯粹的CSS代码来实现这些有趣的效果。所谓的现代浏览器，更多的是指以Mozilla和Webkit为核心的浏览器，IE的表现稍微差强人意，所以请使用FireFox，Safari或者Chrome查看一下的效果。如下就是要介绍的5个非常酷的纯CSS hover 效果。 向上跳跃 这种效果非常适合于当页面上有一横排图片的场景，当鼠标hover时就产生波浪一样的效果。 这个效果实现是非常简单的，并且有多种方法实现，如下的核心实现方法是：初始给所有图片设置mergin，当hover时，给相应的图片减少mergin的值，这样就实现了向上跳跃的效果。 这种效果不光可以应用于图片，一般的横向排列的导航栏也可以应用这样的效果。 效果中的透明效果是并不是必须的，不设置透明属性并不影响hover时的跳跃效果，加上透明只是为了让效果更平滑。 CSS代码： .ex1 img{ border: 5px solid #ccc; float: left; margin: 15px; -webkit-transition: margin 0.5s ease-out; -moz-transition: margin 0.5s

兼容所有浏览器的背景颜色半透明CSS代码： background-color: rgba(0, 0, 0, .25); filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr=#40000000,endColorStr=#40000000); 注意： startColorStr 和 endColorStr 的值，前两位是十六进制的透明度，后面六位是十六进制的颜色。 其格式为 #AARRGGBB 。 AA 、 RR 、 GG 、 BB 为十六进制正整数。取值范围为 00 - FF 。 RR 指定红色值， GG 指定绿色值， BB 指定蓝色值，参阅 #RRGGBB 颜色单位。 AA 指定透明度。 00 是完全透明。 FF 是完全不透明。超出取值范围的值将被恢复为默认值。 2位透明度的换算方法： x=alpha*255 ，将计算的结果 x 转换成十六进制即可。 js换算16进制方法： x.toString(16) 例如：上面的 0.25 透明度，换算为IE的AA透明度： var a = 0.25 * 255 = 63.75 ~= 64; a.toString(16) = 40 Demo示例： <style type="text/css"> .menu-nav-bg { background-color: rgba

各个主流浏览器内核 IE: Trident Safari: webkit 内核 Opera: 以前是presto 内核，现在改用Google Chrome 的Blink内核 Chrome: Blink(基于webkit,Google与Opera Software 共同开发) 360: 双内核（极速模式：webkit，兼容模式：Trident；） Firefox: Geoko 常见的css效果 文本多行溢出 css 代码实现 display: -webkit-box !important; overflow: hidden; text-overflow: ellipsis; word-break: break-all; -webkit-box-orient: vertical; -webkit-line-clamp: 2; 经过测试，在Google、Opera、360极速模式下正常显示，IE、Firefox、360兼容模式下没有效果，还需要使用height来限制内容高度 文本单行溢出 css 代码实现 overflow: hidden; white-space: nowrap; text-overflow: ellipsis; Google、Opera、360、IE、Firefox都正常显示 背景透明 raba(90,183,232,.6) 经过测试，Google、Firefox

css样式里可以用border-radius把div或图片变成带有一定圆角的，如果是div本身是正方形，设置圆角度是百分之五十，就是圆形。 border-radius：值可以是具体的px数值，也可以是百分比。 给div或img加这个属性，都可以把边缘变成圆角的或圆形的。 正方形的div或正方形的img图片，加 border-radius:50%; 会变成圆形。 此外，还可以单独设置两个边框的圆角，单个角： border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius 。 设置div一定透明度的背景色，颜色可以用 rgba ，这个有第四个参数，例如 0.5 ，就是半透明。 图片的透明，可以直接做成半透明的的png图片。 测试代码： <style> body{margin:0px;} #divall{margin-top:30px;margin-left:30px;width:500px;height:230px;background-image:url(bg1.png);position:relative;} #div1{width:100px;height:50px;background:rgba(255,0,0,0.5);border

使用CSS很容易创建透明的图像。 注意： CSS Opacity属性是W3C的CSS3建议的一部分。 更多实例 创建透明图像 - 悬停效果 创建一个具有文本的拥有背景图像的透明框 实例1 - 创建一个透明图像 CSS3中属性的透明度是 opacity . 首先，我们将向您展示如何用CSS创建一个透明图像。 正常的图像 相同的图像带有透明度： 看看下面的CSS： img { opacity:0.4; filter:alpha(opacity=40); /* For IE8 and earlier */ } IE9，Firefox，Chrome，Opera，和Safari浏览器使用透明度属性可以将图像变的不透明。 Opacity属性值从0.0 - 1.0。值越小，使得元素更加透明。 IE8和早期版本使用滤镜：alpha（opacity= x）。 x可以采取的值是从0 - 100。较低的值，使得元素更加透明。 实例2 - 图像的透明度 - 悬停效果 将鼠标移到图像上： CSS样式： img { opacity:0.4; filter:alpha(opacity=40); /* For IE8 and earlier */ } img:hover { opacity:1.0; filter:alpha(opacity=100); /* For IE8 and earlier */ }

CSS3版本是CSS的模块化规范。不同的模块扩展、完善了以往CSS版本的各个方面。例如，CSS3颜色模块解决了色彩校正、透明度等功能；CSS3字体模块增加了文字效果，能调整它们的显示，甚至下载自定义字体。另外，还有一些模块是新添加进来的，如渐变和动画模块。其他一些陈旧的不再使用的功能则被抛弃，或者将被抛弃。不管什么情况，当谈到CSS3时，应认真核对和测试对CSS3 Web站点的支持情况。 1.专属CSS前缀 对于一些Web开发人员，CSS往往与标准和规范相关联。与(X)HTML不同，CSS让浏览器厂商更方便地扩展规范，例如，以连字符“-”或下划线“_”为起始标记的新引入的关键字和特姓名就被认为是供应商特有的拓展。语法是-vendoridentifier-newproperty或_vendoridentifier_newproperty，虽然在实践中，带连字符的名称似乎是唯一在使用的扩展。例如，-moz用作Mozilla功能的前缀时，可以写作-moz-border-radius。常见的前缀如下表所示 另外，还有一些其他专有的CSS前缀，这些前缀或许遵守，或不遵守恰当的前缀机制。例如，支持WAP(无线应用协议)的无线电话可以使用-wap-为前缀的特性，如-wap-accesskey。Microsoft Office的一些应用可能会使用类似mso-的CSS规则，如mso-header

CSS3草案中定义了 {opacity:<length> | inherit;} 来声明元素的透明度，这已经得到了大多数现代浏览器的支持，而IE则很早通过特定的私有属性 filter 来实现的，所以HTML元素的透明效果已经无处不在了。首先看看 A级浏览器 所支持的用 CSS实现元素透明的方案 ： 浏览器 最低 版本 方案 Internet Explorer 4.0 filter: alpha(opacity=xx); 5.5 filter: progid:DXImageTransform.Microsoft.Alpha(opacity=xx); 8.0 filter: "alpha(opacity=xx)"; filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=xx)"; -ms-filter: "alpha(opacity=xx)"; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=30)"; Firefox (Gecko) 0.9 (1.7) opacity Opera 9.0 opacity Safari (WebKit) 1.2 (125) opacity 实际上在IE8中，-ms-filter是filter的别名，两者区别是 -ms

问题：经常遇到的浏览器的兼容性的情况、解决方法？ 思路：首先明确项目要兼容哪些浏览器的最低版本，然后考虑到CSS样式和JavaScript在这些浏览器的兼容性。 一、HTML 兼容性   1.H5新标签在低于IE9的浏览器中的识别   html5shiv.min.js：解决ie9以下浏览器对html5新增标签的不识别，并导致CSS不起作用的问题。   respond.min.js: 让不支持css3 Media Query的浏览器包括IE6-IE8等其他浏览器支持查询。   <!--[if lt IE 9]>     <script src=" http://cdn.bootcss.com/html5s... ;></script>     <script src=" http://cdn.bootcss.com/respon... ;></script>   <![endif]-->   引入respond.min.js，但要在css的后面（越早引入越好，在ie下面看到页面闪屏的概率就越低，因为最初css会先渲染出来，如果respond.js加载得很后面，这时重新根据media query解析出来的css会再改变一次页面的布局等，所以看起来有闪屏的现象）。   2.不同浏览器的标签默认的内/外补丁不同   虽然这些年来随着浏览器的迅速发展与规范的统一