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. Redis.RedisNativeClient的方法get_Db 没有实现

    C#出现问题:Redis.RedisNativeClient”的方法“get_Db”没有实现 ServiceStack.Redis.RedisNativeClient”的方法“get_Db”没有实现 ...

  2. Hadoop本地安装

    安装JDK卸载已经安装的JDK安装sun公司的JDK安装Hadoop(本地方式)解压并安装启动测试程序 安装JDK 卸载已经安装的JDK rpm -qa|grep jdk rpm -qa|grep g ...

  3. 如何创建管理员权限的CMD命令提示符窗口

    最近在使用netstat -anob命令时提示 请求的操作需要提升. 总结了几种创建管理员权限的CMD命令行的方法. 创建临时管理员权限的CMD Win8系统: 按下windows徽标,直接输入cmd ...

  4. New Concept English Two 4

    听力口语是一起的,其中,受中国英语发音的影响,我们的听力识别度会很差,歪果仁发的地道英语,极有可能我们听不懂.这涉及到:自然拼读法的训练,还有纠音练习.当然,听简单的美剧的音频,然后练习是最好的. 新 ...

  5. Java实现冒泡排序，选择排序，插入排序

    冒泡排序: 思想: 冒泡排序重复地走访过要排序的数列,一次比较两个元素,如果他们的顺序错误就把他们交换过来.走访数列的工作是重复地进行直到没有再需要交换,也就是说排序完成 特点:比较稳定,排序数较小是 ...

  6. Django 之 自定义中间件

    环境:django:1.10    python: 2.7 简介 中间件是一个轻量级.底层的插件系统,可以介入 django 的请求和响应处理过程,修改 django 的输入和输出. 在 django ...

  7. JFreeChart的简单使用

    实例1:简单的饼图 public class Test { public static void main(String[] args) { //建立默认的饼图 DefaultPieDataset d ...

  8. 博客网站-Hexo+GitHub+Netlify

    Hexo+GitHub+Netlify一站式搭建属于自己的博客网站 https://www.cnblogs.com/kerbside/p/10130606.html https://hhongwen. ...

  9. Python面试题（十六）

    1.取出两个升序数组中的最小的一半的元素组成一个新的升序数组. map(lambda x, y: x if x < y else y, a, b) 答案 2.用至少2种不同的方式删除一个list ...

  10. linux 下mongodb 3.2.5单机版安装

    mongodb3.0.x的安装教程网上很多,这里主要介绍3.2.5的安装 linux iso 在\\10.10.10.1\ShareDoc\User\yipengzhi\ISO\Centos7.0   ...