by 一丝

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8">

    <title>背景半透明rgba最佳实践</title>

    <style>

    </style>

  </head>

  <body>

    <div class="main">

      <div class="demo demo1"><a href="http://www.css88.com/demo/hex_color/">转换工具</a></div>

      <div class="demo demo2"><a href="http://www.css88.com/demo/hex_color/">转换工具</a></div>

    </div>

  </body>

</html>

body {

  background: url(http://ww4.sinaimg.cn/cmw205/90f78f62jw1eafnlnk7cqj20q00yon2w.jpg) no-repeat 50% 0;

}

.demo {

  width: 100px;

  height: 100px;

  line-height: 100px;

  margin: 20px auto;

  border: 1px solid #000;

  text-align: center;

  color: green;

}

.demo1 {

  background:rgba(0, 0, 0, .3);

}

.demo2 {

  background:rgba(0, 0, 0, .3);

  filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#4c000000', EndColorStr='#4c000000');

}

/*

 * IE9 由于rgba和filter都支持，会导致两个颜色叠加，使用hack去除

 * \9 代表 IE9 以下浏览器支持

 * :root 只有 IE9+ 以及其他现代浏览器支持

 * IE10 以上不再支持 filter

*/

:root * {

  filter: none\9 !important;

}

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>背景半透明rgba最佳实践</title>
<style>
body {
background: url(http://ww4.sinaimg.cn/cmw205/90f78f62jw1eafnlnk7cqj20q00yon2w.jpg) no-repeat 50% 0;

}

.demo {
width: 100px;
height: 100px;
line-height: 100px;
margin: 20px auto;
border: 1px solid #000;
text-align: center;
color: green;
}

.demo1 {
background:rgba(0, 0, 0, .3);
}

.demo2 {
background:rgba(0, 0, 0, .3);
filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#4c000000', EndColorStr='#4c000000');
}

/*
* IE9 由于rgba和filter都支持，会导致两个颜色叠加，使用hack去除
* \9 代表 IE9 以下浏览器支持
* :root 只有 IE9+ 以及其他现代浏览器支持
* IE10 以上不再支持 filter
*/

:root * {
filter: none\9 !important;
}
</style>
</head>
<body>
<div class="main">
<div class="demo demo1"><a href="http://www.css88.com/demo/hex_color/">转换工具</a></div>
<div class="demo demo2"><a href="http://www.css88.com/demo/hex_color/">转换工具</a></div>
</div>
</body>
</html>

运行代码

背景半透明rgba最佳实践的更多相关文章

  1. 【27前端】背景半透明rgba LESS实践

    今天有看到司徒正美<背景半透明rgba最佳实践>的文章和里面推荐的一个在线工具CSS背景颜色属性值转换  . 于是联系到自己的less库,新技能Get. 内容如下: /*在你的less库中 ...

  2. css背景色半透明的最佳实践

    之前项目中遇到纯色的半透明背景,都是这么干: <style> .box {width:300px;height:300px;position:relative;} .mask {width ...

  3. iOS系统中导航栏的转场解决方案与最佳实践

    背景 目前,开源社区和业界内已经存在一些 iOS 导航栏转场的解决方案,但对于历史包袱沉重的美团 App 而言,这些解决方案并不完美.有的方案不能满足复杂的页面跳转场景,有的方案迁移成本较大,为此我们 ...

  4. Canvas 最佳实践（性能篇）

    Canvas 想必前端同学们都不陌生,它是 HTML5 新增的「画布」元素,允许我们使用 JavaScript 来绘制图形.目前,所有的主流浏览器都支持 Canvas. Canvas 最常见的用途是渲 ...

  5. 【转】优化Web程序的最佳实践

    自动排版有点乱,看着蛋疼,建议下载中文PDF版阅读或阅读英文原文. Yahoo!的Exceptional Performance团队为改善Web性能带来最佳实践.他们为此进行了 一系列的实验.开发了各 ...

  6. 前端代码标准最佳实践：CSS

    前端工程师对写标准的前端代码的重视程度很高.这些最佳标准实践并不是那个权威组织发布的,而是由大量的前端工程师们在实践过程中的经验总结,目的在于提高代码的可读性,可维护性和性能.那么接着上一篇,我们再来 ...

  7. HTML 文档之 Head 最佳实践--摘抄

    HTML 文档之 Head 最佳实践 story 01-10 阅读 353 收藏 0 收藏 这篇文章整理了作者认可的一些最佳实践,写在这里与各位分享 阅读原文折叠收起 HTML 文档之 Head 最佳 ...

  8. RESTful API 设计最佳实践

    背景 目前互联网上充斥着大量的关于RESTful API(为了方便,以后API和RESTful API 一个意思)如何设计的文章,然而却没有一个"万能"的设计标准:如何鉴权?API ...

  9. 一触即发 App启动优化最佳实践

    一触即发 App启动优化最佳实践 本文在 DiyCode 和 CSDN个人博客 同时首发,关注作者的 DiyCode帐号 或者 作者微博 可第一时间收到新文章推送. 文中的很多图都是Google性能优 ...

随机推荐

  1. FZU 2150 Fire Game 广度优先搜索,暴力 难度:0

    http://acm.fzu.edu.cn/problem.php?pid=2150 注意这道题可以任选两个点作为起点,但是时间仍足以穷举两个点的所有可能 #include <cstdio> ...

  2. 前端常用框架和js插件 UI组件等

    前言:写这个随笔,是记录一下工作以来用到的各种框架.以免日后忘记: JS库: 1. jquery.js 2. zepto.js ----jquery的精简版,专门用于手机上的,但是zepto主体默认是 ...

  3. mysql远程连接的设置

    有时数据库所在机器与项目运行的机器不是同一个,那么就涉及到远程链接数据库了,配置远程连接数据库的步骤如下: 1.查看mysql数据库中,user表中的信息,如下图,先使用use mysql切换到mys ...

  4. Windows下MySQL多实例运行

    1.正常安装Windows版的MySQL,例如安装在C:\Program Files\MySQL文件夹里: 2.按照常规配置好MySQL: (注:5.6版本的 data文件夹与 my.ini文件在C: ...

  5. Python数据类型-04.字典

    字典是python中唯一的映射类型,采用键值对(key-value)的形式存储数据 ------------ 完美的分割线 ------------- 1.字典引入 # 为何还要用字典?存放一个人的信 ...

  6. Redis3.0集群

    Redis集群介绍 Redis 集群是一个提供在多个Redis间节点间共享数据的程序集. Redis集群并不支持处理多个keys的命令,因为这需要在不同的节点间移动数据,从而达不到像Redis那样的性 ...

  7. 20155230 2016-2017-2 《Java程序设计》第八周学习总结

    20155230 2016-2017-2 <Java程序设计>第八周学习总结 教材学习内容总结 java.util.logging包提供了日志功能相关类与接口,使用日志的起点是logger ...

  8. 每天一个linux命令（性能、优化）：【转载】iostat命令

    Linux系统中的 iostat是I/O statistics(输入/输出统计)的缩写,iostat工具将对系统的磁盘操作活动进行监视.它的特点是汇报磁盘活动统计情况,同时也会汇报出CPU使用情况.同 ...

  9. 关于ppt的字体（转载）

    壹文钱:教程(13)——字体篇(上) 2015-11-25 @嘉文钱 幻方秋叶PPT 前三期嘉文给大家说了颜色,想复习的童鞋,链接在此: 壹文钱:教程(10)——色色,你好! 壹文钱:教程(11)—— ...

  10. hdu 4336 Card Collector——最值反演

    题目:http://acm.hdu.edu.cn/showproblem.php?pid=4336 点集中最早出现的元素的期望是 min ,最晚出现的元素的期望是 max :全部出现的期望就是最晚出现 ...