背景半透明rgba最佳实践
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最佳实践的更多相关文章
- 【27前端】背景半透明rgba LESS实践
今天有看到司徒正美<背景半透明rgba最佳实践>的文章和里面推荐的一个在线工具CSS背景颜色属性值转换 . 于是联系到自己的less库,新技能Get. 内容如下: /*在你的less库中 ...
- css背景色半透明的最佳实践
之前项目中遇到纯色的半透明背景,都是这么干: <style> .box {width:300px;height:300px;position:relative;} .mask {width ...
- iOS系统中导航栏的转场解决方案与最佳实践
背景 目前,开源社区和业界内已经存在一些 iOS 导航栏转场的解决方案,但对于历史包袱沉重的美团 App 而言,这些解决方案并不完美.有的方案不能满足复杂的页面跳转场景,有的方案迁移成本较大,为此我们 ...
- Canvas 最佳实践（性能篇）
Canvas 想必前端同学们都不陌生,它是 HTML5 新增的「画布」元素,允许我们使用 JavaScript 来绘制图形.目前,所有的主流浏览器都支持 Canvas. Canvas 最常见的用途是渲 ...
- 【转】优化Web程序的最佳实践
自动排版有点乱,看着蛋疼,建议下载中文PDF版阅读或阅读英文原文. Yahoo!的Exceptional Performance团队为改善Web性能带来最佳实践.他们为此进行了 一系列的实验.开发了各 ...
- 前端代码标准最佳实践：CSS
前端工程师对写标准的前端代码的重视程度很高.这些最佳标准实践并不是那个权威组织发布的,而是由大量的前端工程师们在实践过程中的经验总结,目的在于提高代码的可读性,可维护性和性能.那么接着上一篇,我们再来 ...
- HTML 文档之 Head 最佳实践--摘抄
HTML 文档之 Head 最佳实践 story 01-10 阅读 353 收藏 0 收藏 这篇文章整理了作者认可的一些最佳实践,写在这里与各位分享 阅读原文折叠收起 HTML 文档之 Head 最佳 ...
- RESTful API 设计最佳实践
背景 目前互联网上充斥着大量的关于RESTful API(为了方便,以后API和RESTful API 一个意思)如何设计的文章,然而却没有一个"万能"的设计标准:如何鉴权?API ...
- 一触即发 App启动优化最佳实践
一触即发 App启动优化最佳实践 本文在 DiyCode 和 CSDN个人博客 同时首发,关注作者的 DiyCode帐号 或者 作者微博 可第一时间收到新文章推送. 文中的很多图都是Google性能优 ...
随机推荐
- Powerdesigner颜色设置
Powerdesigner颜色设置
- bzoj2134
题解: 每一题对的概率为min(a[i],a[i+1])/a[i]/a[i+1]; 即可 代码: #include<bits/stdc++.h> using namespace std; ...
- Python 编程核心知识体系-函数（二）
函数
- L201
The American public’s obsession with dieting has led to one of the most dangerous healthmisconceptio ...
- winform messagebox 统一
vb.net 里面有两种messagebox,一种是vb语言提供的msgbox,另一种是.net framework 提供的messagebox.在此统一使用messagebox. Warning,提 ...
- Python中的变量和常量
本文主要介绍Python中的变量和常量,包括变量的命名规范,使用注意事项 -------------- 完美的分割线 --------------- 1.变量 1.1.变量理解 1)什么是变量 变量即 ...
- CF1061F：Lost Root（交互&概率）
The graph is called tree if it is connected and has no cycles. Suppose the tree is rooted at some ve ...
- android如何改变应用程序安装后显示的图标
修改 res目录下所有ic_launcher.png 为你想显示的图标
- bootstrap table教程--使用入门基本用法
笔者在查询bootstrap table资料的时候,看了很多文章,发觉很多文章都写了关于如何使用bootstrap table的例子,当然最好的例子还是官网.但是对于某部分技术人员来说,入门还是不够详 ...
- 【java多线程】java的线程池分析
(一)线程池的拒绝策略 --->拒绝策略的接口java.util.concurrent.RejectedExecutionHandler --->终止策略(默认):java.util.co ...