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. 同一sql表，在页面展示多级菜单

    2.

  2. vue 子组件传递数据跟父组件

    子组件 <body> <div v-on:click="test"></div> <script> export default { ...

  3. 201621123006 《Java程序设计》第11周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多线程相关内容. 2. 书面作业 本次PTA作业题集多线程 1. 源代码阅读:多线程程序BounceThread 1.1 BallR ...

  4. 5.5修改xadmin的头部底部和导航栏名称

    1.修改xadmin的头部标题和底部信息: 在users模块中的adminx.py中添加修改函数: from xadmin import views class GlobalSettings(obje ...

  5. 安装xadmin后台管理插件

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

  6. 移动端rem布局雪碧图解决方案 以及分享腾讯团队的在线雪碧图工具

    先分享一下地址:http://alloyteam.github.io/gopng/ 使用的方法也很简单,将需要的小图标拖进去,全部拖进去后再调位置(每拖一个进去都会帮你排列好,但是没有间隔,所以全部拖 ...

  7. java面试题7

    1.重载和重写的区别? 重载(Overload):(1)方法重载是让类以统一的方式处理不同类型数据的一种手段.多个同名函数同时存在,具有不同的参数个数/类型.重载Overloading是一个类中多态性 ...

  8. Objective-C教程备忘单

    终极版本的Objective-C教程备忘单帮助你进行iOS开发. 想开始创建你的第一个iOS应用程序么?那么看一下这篇很棒的教程吧:Create your first iOS 7 Hello Worl ...

  9. [BZOJ3162]独钓寒江雪

    bzoj description 你要给一个树上的每个点黑白染色,要求白点不相邻.求本质不同的染色方案数. 两种染色方案本质相同当且仅当对树重新标号后对应节点的颜色相同. \(n\le 5\times ...

  10. 【传输协议】http协议GET与POST传递数据的最大长度能够达到多少

    各种web开发语言中,各个页面之间基本都会进行数据的传递,web开发里面比较常用的数据传递方式有get post,一直以来我都只知道get传递的数据量要比post传递的数据量要少,所以传递大数据量还是 ...