魔哥Css:背景色透明，内容不透明之终极方法！兼容(不支持ie6)。

zoukankan html css js c++ java

魔哥Css:背景色透明，内容不透明之终极方法！兼容(不支持ie6)。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>小魔出品</title> <style> body {background:url(http://www.google.com.hk/intl/zh-CN/images/logo_cn.png) 0 0 repeat;} * {margin:0;padding:0;} .Boxer {600px;height:400px;overflow:hidden;margin:0 auto;border:6px solid red;} .Opacity { height:400px; background-color:rgba(0,0,0,0.5); /*标准浏览器只需这句*/ background-color:#000\9; /*IE 系列*/ filter:alpha(opacity=50); /*IE 系列*/ /* 作为透明背景的层，不可以有 position 属性，不知为何。。。。 background-color:rgba(0,0,0,0.5) 这句，IE6貌似能读懂一小部分，我艹了。所以只能将background-color:#000 写在其后，然后加个IE的专有Hack。不信可以写一个试试看 background-color:#000;background-color:rgba(0,0,0,0.5);filter:alpha(opacity=50); IE6会让你蛋疼的！ */ } .BoxerInner {position:relative; /*IE 系列*/ text-align:center;font-size:24px;font-weight:700;color:yellow;} </style> </head> <body> <p style="font-size:60px;color:#000;text-align:center;padding:20px;font-weight:700;">Css:背景色透明，内容不透明之终极方法！兼容，终极。</p> <div class="Boxer"> <div class="Opacity"> <div class="BoxerInner">BoxerInner</div> </div> </div> </body> </html>

查看全文

相关阅读:
数组、链表、Hash的优缺点
 数据库-索引的坏处，事务的级别，分布式事务的原理。
4G内存的电脑，如何读取8G的日志文件进行分析，汇总数据成报表的面试题
 数据库常用的锁有哪些
 2020年最新 C# .net 面试题，月薪20K+中高级/架构师必看（十）
ThreadX应用开发笔记之一：移植ThreadX到STM32平台
 net core 方法返回值重改？
使用RestTemplate发送HTTP请求举例
 dedecms织梦手机站上一篇下一篇链接错误的解决方法
 多目标跟踪之数据关联（匈牙利匹配算法和KM算法）

原文地址：https://www.cnblogs.com/jikey/p/1857217.html