CSS中RGBA的兼容方法以及透明度计算方法
CSS对IE使用背景透明 实现 rgba 效果
height:35px;
background: -webkit-gradient(linear,left top,left bottom,from(rgba(68,102,113,0.9)),to(rgba(46,74,83,0.9)));
background: -moz-linear-gradient(top, rgba(68,102,113,0.9), rgba(46,74,83,0.9));
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#5A446671', endColorstr='#5A2E4A53'); /* IE6,IE7 */
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr='#E6446671', endColorstr='#E62E4A53')"; /* IE8 */
对 IE 的 filter 的 gradient 渐变滤镜中的颜色参数比常见的多了两位,因为 前两位是透明度的十六进制数值
例如:
#E62E4A53 中的 E6 代表透明度为 opacity 的 0.9, 2E4A53 才是真正的色彩值
透明度的计算方法:
256*0.9=230.4 取 230 通过计算转换为 十六进制 E6
(可以用windows自带的计算器选择程序员类型计算出来)
star 和 end 的颜色可以相同,这样就可以背景半透明了,
另外说明: IE7 需要指定高度 height 时背景渐变才会生效,否则不会显示的
CSS中RGBA的兼容方法以及透明度计算方法的更多相关文章
- css中添加屏幕自适应方法(rem)
css中添加屏幕自适应方法(rem) 只需要在公共css文件中添加下面代码:设计稿以750px,基础字体为20px为例,兼容性高,使用过程中px转化为rem即可 /*竖屏*/ @media scree ...
- css中的一些兼容问题
浏览器兼容 为什么会有兼容问题? 由于市场上浏览器种类众多,而不同浏览器其内核亦不尽相同,所以各个浏览器对网页的解析就有一定出入,这也是导致浏览器兼容问题出现的主要原因,我们的网页需要在主流浏览器上正 ...
- css中的毛玻璃(不是透明度) 简单文档
其实毛玻璃很简单 只需要在css中加入 backdrop-filter:blur(8px); 8px是模糊力度 注意:使用该方法前需要设置背景不能是透明(如果是显示这个元素下面的图像记得半透明,例子就 ...
- CSS中背景图片定位方法
转自:http://www.ruanyifeng.com/blog/2008/05/css_background_image_positioning.html 作者: 阮一峰 日期: 2008年5月 ...
- CSS中的各种居中方法总结
CSS中的居中可分为水平居中和垂直居中.水平居中分为行内元素居中和块状元素居中两种情况,而块状元素又分为定宽块状元素居中和不定宽块状元素居中.下面详细介绍这几种情况. 一.水平居中 1.行内元素居中 ...
- CSS 中的字体兼容写法:用CSS为英文和中文字体分别设置不同的字体
font-family的调用方法: font-family:Arial,'Times New Roman','Microsoft YaHei',SimHei; font:bold 12px/.75em ...
- (转)HTML&CSS——background: url() no-repeat 0 -64px;CSS中背景图片定位方法
http://blog.csdn.net/oscar92420aaa/article/details/51304067 CSS中背景图片的定位,困扰我很久了.今天总算搞懂了,一定要记下来. 在CSS中 ...
- css 中 div垂直居中的方法
在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...
- HTML&CSS——background: url() no-repeat 0 -64px;CSS中背景图片定位方法
CSS中背景图片的定位,困扰我很久了.今天总算搞懂了,一定要记下来. 在CSS中,背景图片的定位方法有3种: 1)关键字:background-position: top left; 2)像素:bac ...
随机推荐
- Linux中的info指令
Info 是什么?info是一种文档格式,也是阅读此格式文档的阅读器:我们常用它来查看Linux命令的info文档.它以主题的形式把几个命令组织在一起,以便于我们阅读:在主题内以node(节点)的形式 ...
- PRD学习笔记:一些需要注意的说明
控件说明 1)输入框 若输入框有默认提示,点击输入框,弹出软键盘. 当输入框内不为空(空格除外)时,默认显示消失. 2)软键盘的弹出及退去机制 当输入框内必须输入的为数字时,弹出数字软键盘.其余时候, ...
- 为什么需要DevOps
过去一年以来,一批来自欧美的.不墨守陈规的系统管理员和开发人员一直在谈论一个新概念:DevOps.DevOps 就是开发(Development) 和运维(Operations)这两个领域的合并.(如 ...
- Vs2015 Ef 连接Oracle 出现OracleInternal.Common.ConfigBaseClass 的解决办法
如果配置没问题的话,就是 Oracle.ManagedDataAccess 在全局程序集的版本问题 解决方法方法 将Oracle.ManagedDataAccess GAC全局程序集中移除 1:用C ...
- html5之datalist标签
当我看到这个标签的时候,其实我是很愤怒的.因为我以前实现过这个标签的功能,当时是无比的费劲.什么js库呀,function呀.我靠,统统去屎吧,哥有datalist了.那种感觉就好像自己千辛万苦去追去 ...
- 同盾安卓 Android应用 集成步骤:
Android SDK 新版 Android SDK 旧版 1.点击下载最新SDK(当前版本3.0.3),并解压fraudmetrix-xxx.zip文件.解压后文件目录为: fm-core-xxx ...
- RelativeLayout各个属性
android:layout_above="@id/xxx" --将控件置于给定ID控件之上 android:layout_below="@id/xxx" ...
- jQuery基础教程第四版练习答案
第二章 1. $('#selected-plays>li>ul>li').nextAll().addBack().addClass('special'); 2. $('table') ...
- ECMAScript6之Set结构和Map结构
set数据结构 ES6提供了一个新的数据结构,Set,Set和Array数组相似,但是Set里没有重复的数据,可以说是一个值的集合. 同时,Set数据结构有以下属性和方法: size:返回成员总数 a ...
- [MFC] 对话框菜单项Menu选中打勾(单选,多选)
近期需要实现一个功能:MFC对话框中,一项菜单下有五个菜单项,改变菜单项选中状态,每次只能选择其中一个打勾.(单选) 然后在网上搜了下资料,稍微总结下,以防后面用到. 1.单选实现: CMenu* m ...