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. hrbust 1621 迷宫问题II 广搜

    题目链接:http://acm.hrbust.edu.cn/vj/index.php?/vj/index.php?c=&c=contest-contest&cid=134#proble ...

  2. asp.net(c#)开发中的文件上传组件uploadify的使用方法（带进度条）

    上文件传很常见,现在就文件上传利用HTML的File控件(uploadify)的,这里为大家介绍一下(uploadify)的一些使用方法.在目前Web开发中用的比较多的,可能uploadify(参考h ...

  3. TextView上下滑动

    LocationResult = (TextView) findViewById(R.id.textView1);LocationResult.setMovementMethod(ScrollingM ...

  4. Ctrl+K,Ctrl+D

    先按下Ctrl+K,然后按下Ctrl+D可以自动调整代码.

  5. SharePoint Development - Custom List using Visual Studio 2010 based SharePoint 2010

    博客地址 http://blog.csdn.net/foxdave 之前两次我们定义了内容类型和字段,我们现在用它们为这一讲服务--创建一个自定义列表. 打开Visual Studio,打开之前的工程 ...

  6. 安装xadmin后台管理插件

    django自带的admin后台管理功能太少.使用国人开发的xadmin后台,使用pip install xadmin安装在线包时,会出错,其中的README.rst是utf8格式,我们win7系统默 ...

  7. 前端 —— SVG

    0. 简介 SVG:可缩放矢量图形: SVG 是代码,通过浏览器的解析而渲染成一种图形: 可缩放矢量图形是基于可扩展标记语言(XML),以描述二维矢量图形的一种图形格式,由万维网联盟( World W ...

  8. 51Nod 1006：最长公共子序列Lcs（打印LCS）

    1006 最长公共子序列Lcs  基准时间限制:1 秒 空间限制:131072 KB 分值: 0 难度:基础题  收藏  关注 给出两个字符串A B,求A与B的最长公共子序列(子序列不要求是连续的). ...

  9. Struts2中StrutsRequestWrapper类

    该类可获取一些请求地址,在自定义struts2标签时用到 //获取值栈 Map cont= this.getStack().getContext(); StrutsRequestWrapper req ...

  10. LG4717 【模板】快速沃尔什变换

    题意 题目描述 给定长度为\(2^n\)两个序列\(A,B\),设\(C_i=\sum_{j\oplus k}A_jB_k\)分别当\(\oplus\)是or,and,xor时求出C 输入输出格式 输 ...