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. C primer plus 5 读书笔记3

    1.ASCII 码前31位控制字符(非打印字符)的表示方法:(1)使用ASCII码表示比如蜂鸣字符用7(十进制)表示:(2),使用特殊的符号序列,即转义序列.如 ‘\a’表示蜂鸣字符.(3),使用十六 ...

  2. sgu 146. The Runner 取模技巧 难度:1

    146. The Runner time limit per test: 0.25 sec.memory limit per test: 4096 KB input: standard inputou ...

  3. mmap实现大文件快速拷贝

    body, table{font-family: 微软雅黑; font-size: 13.5pt} table{border-collapse: collapse; border: solid gra ...

  4. 在centos7下安装java8和mysql

    一般学习java和部署项目都是在本地部署,但是生产环境一般都是在linux环境下,部署和安装环境都是在控制台下进行操作的,没有windows的可视化的操作界面,对与linux的命令掌握和操作对小白来说 ...

  5. facade外观模式

    通过买股票与通过基金买股票引出外观模式: package com.disign.facade; /** * Created by zhen on 2017-05-18. */ public class ...

  6. java基础11天

    冒泡排序 相邻元素两两比较,大的往后放,第一次完毕,最大值出现在了最大索引处,第二次比较厚,最大值放在了倒数第二的位置,一直到第二个元素确定了,整个数组的顺序也就确定了 public class Ar ...

  7. 作业要求20181023-4 Alpha阶段第2周/共2周 Scrum立会报告+燃尽图 01

    作业要求[https://edu.cnblogs.com/campus/nenu/2018fall/homework/2284] 版本控制:https://git.coding.net/liuyy08 ...

  8. 找到链表的倒数第k个节点 python

    题目:给定一个链表的头节点,输出链表倒数第k个节点的值 分析:最简单的思路就按顺序访问链表节点,得到链表的长度x之后,再次从头节点出发,访问到第x-k+1个节点时,就是链表倒数第k个节点,但是这样的方 ...

  9. Word操作（基于word2013）【非编程类】

    一.生成目录 1.word支持自动生成目录功能,生成地点为操作时光标的落点 2.生成方式:打开首选项,进入引用标签,如下图所示最左边即为目录选项. 一般有3个内置目录类型 a:手动目录,生成目录后只有 ...

  10. 文件和I/O流

    版权声明:本文为[博主](https://zhangkn.github.io)原创文章,未经博主同意不得转载.https://creativecommons.org/licenses/by-nc-sa ...