[置顶] css 背景透明，文字不透明，alpha滤镜，opacity，position:relative;
都知道，在alpha滤镜下，背景透明了，里面的文字也会跟随透明，我们可以设置内容的position为relative可以解决这个问题
但是在position为absolute这么做却没有效果，怎么解决呢，看代码：
<!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=gbk" />
<title>alpha</title>
<style type="text/css">
.alpha
{
width:100px;
height:100px;
background-color:red;
display:block;
opacity: 0.35;
filter: "alpha(opacity=35)";
filter: alpha(opacity=35);
-moz-opacity: 0.35;
}
</style>
</head><body>
<div class="alpha">
<div>文字显示</div>
</div>
</body>
</html>
这样显示的文字也是0.35的透明，修改代码如下：
<!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=gbk" />
<title>alpha</title>
<style type="text/css">
.alpha
{
width:100px;
height:100px;
background-color:red;
display:block;
opacity: 0.35;
filter: "alpha(opacity=35)";
filter: alpha(opacity=35);
-moz-opacity: 0.35;
}
</style>
</head>
<body>
<div class="alpha">
<div style="position:relative;"> 文字显示</div>
</div>
</body>
</html>
文字没有了不透明效果
这没什么，也不是我要说的重点
看这个
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
.alpha50
{
opacity: 0.5;
filter: "alpha(opacity=50)";
filter: alpha(opacity=50);
-moz-opacity: 0.5;
} .box
{
width: 173px;
height: 163px;
display: block;
background-color: orange;
} .absolute
{
position: absolute;
width: 173px;
height: 30px;
margin-top: 133px;
} .relative
{
position: relative;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<div class="box">
<div class="absolute alpha50">
<div class="relative">显示文字</div>
</div>
</div>
</div>
</form>
</body>
</html>
虽然设了relative，但文字还是透明的
反复试验 我发现修改代码顺序可以解决这个问题
如下：
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
.alpha50
{
opacity: 0.5;
filter: "alpha(opacity=50)";
filter: alpha(opacity=50);
-moz-opacity: 0.5;
} .box
{
width: 173px;
height: 163px;
display: block;
background-color: orange;
} .absolute
{
position: absolute;
width: 173px;
height: 30px;
margin-top: 133px;
} .relative
{
position: relative;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<div class="box">
<div class="absolute">
<div class="alpha50">
<div class="relative">显示文字</div>
</div>
</div>
</div>
</div>
</form>
</body>
</html>
先absolute再alpha可以解决在absolute下设置relative的不透明度
ok
[置顶] css 背景透明，文字不透明，alpha滤镜，opacity，position:relative;的更多相关文章
- [小技巧]兼容IE6的纯CSS背景半透明文字不透明
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- css背景透明文字不透明
测试背景透明度为0.3.文字不透明: background-color: #000; /* 一.CSS3的opacity */ opacity: 0.3; /* 兼容浏览器为:firefox,chro ...
- css实现背景透明文字不透明
设置元素的透明度: -moz-opacity:0.8; /*在Firefox中设置元素透明度 filter: alpha(opacity=80); /*ie使用滤镜设置透明 但是当我们对一个标 ...
- css3背景透明文字不透明
在 FF/Chrome 等较新的浏览器中可以使用css属性background-color的rgba轻松实现背景透明,而文字保持不透明.而IE6/7/8浏览器不支持rgba,只有使用IE的专属滤镜fi ...
- 背景透明文字不透明的最佳方法兼容IE(以背景黑色透明度0.5为例)
以背景黑色,透明度0.5举例为大家详细介绍下关于背景透明,文字不透明的最佳方法同时兼容IE,具体实现如下,感兴趣的朋友可以参考下哈希望对大家有所帮助 以背景黑色,透明度0.5举例 非IE:backgr ...
- CSS3实现背景透明文字不透明
最近遇到一个需求,如下图,input框要有透明效果 首先想到的方法是CSS3的 opacity属性,但事实证明我想的太简单了 这个属性虽然让input框有透明效果,同时文字和字体图标也会有透明效果,导 ...
- div半透明背景，文字不透明
background: rgba(255, 255, 255, 0.8) !important; /* IE无效,FF有效 */ background: #fff; filter: alpha(opa ...
- css实现背景半透明文字不透明的效果
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- html 背景透明文字不透明
.alpha{ width: 100px; height: 100px; color: #fff; background: rgba(0, 0, 0, .3); filter: progid:DXIm ...
随机推荐
- java学习之数组排序一：选择排序
在讲完java中数组定义的两种方式之外,这里需要讲一下对数组常用的方法,第一个就是排序. 加入我们现在有个数组:int[] arr = {12,87,34,3,98,33,103}; 思路1: 1.首 ...
- 【转】java参数传递（超经典）
原文网址:http://blog.sina.com.cn/s/blog_4b622a8e0100c1bo.html Java中的参数传递机制一直以来大家都争论不休,究竟是“传值”还是“传址(传引用)” ...
- HDOJ(HDU) 2153 仙人球的残影(谜一样的题、、、)
Problem Description 在美丽的HDU,有一名大三的同学,他的速度是众所周知的,跑100米仅仅用了2秒47,在他跑步过程中会留下残影的哎,大家很想知道他是谁了吧,他叫仙人球,既然名字这 ...
- bzoj1433 [ZJOI2009]假期的宿舍（最大流）
1433: [ZJOI2009]假期的宿舍 Time Limit: 10 Sec Memory Limit: 162 MBSubmit: 1717 Solved: 754[Submit][Stat ...
- [Locked] Shortest Distance from All Buildings
Shortest Distance from All Buildings You want to build a house on an empty land which reaches all bu ...
- 意大利进口的衬衫面料pH值严重超标·都市快报
意大利进口的衬衫面料pH值严重超标·都市快报 意大利进口的衬衫面料pH值严重超标 董捷 2007-03-24 通讯员 浙 检 记 者 董 捷 ...
- 由浅入深吃透MVC框架，驯服烂代码
MVC 已经成为客户端的主流编程框架,相信客户端工程师对它并不陌生,甚至在开发过程中,不通过思考都会自动使用 MVC 框架编程.但在工作过程中,发现许多小伙伴也只是使用 MVC,对于为什么这样使用并不 ...
- 第一节：Scrapy开源框架初探
Scrapy是一个为了爬取网站数据,提取结构性数据而编写的应用框架. 可以应用在包括数据挖掘,信息处理或存储历史数据等一系列的程序中. 具体开发流程如下: 一.确定待抓取网站 当您需要从某 ...
- Unity3D NGUI制作进度条
利用GUI可以制作进度条,但是NGUI更加方便 我是用的NGUI3.5.3, 先找到NGUI Slider的预制体,利用自带的UISlider来制作. 主要是利用UISlider的Value来控制进 ...
- base64 小测试:
base64工作原理:Base64是MIME邮件中常用的编码方式之一.它的主要思想是将输入的字符串或数据编码成只含有{'A'-'Z', 'a'-'z', '0'-'9', '+', '/'}这64个可 ...