css 二级分类背景背景颜色透明 css字看不清了
点击联系发帖人
时间：2015-09-16 07:03
CSS实现背景透明/半透明效果但内容文字不透明（兼容IE，FF，OP等浏览器_op浏览器-牛bb文章网
CSS实现背景透明/半透明效果但内容文字不透明（兼容IE，FF，OP等浏览器 op浏览器
所属栏目：
针对透明背景，包括背景图片和背景色（兼容IE，FF，OP等浏览器）一、背景完全透明.bg{background:transparent}二、背景半透明这里要分两个div，一个单独设置背景透明度，另外一个放内容 margin-top:-33使用这个方法让文字叠加在透明背景图上。css:.bg{ width: 1000 height:33background-color:#background-image:url(img.jpg); filter:alpha(opacity=30);-moz-opacity:0.3;opacity:0.3;-khtml-opacity: 0.3;}.contnet{margin-top:-33 width:500height:33 overflow:}html:&div&&/div&&div&这里是文字部分不透明&/div&欢迎您转载分享：
更多精彩：兼容IE6的纯CSS背景半透明文字不透明
&!DOCTYPE &
&html lang=&en&&
&meta charset=&UTF-8&&
IE背景半透明
&style type=&text/css&&
width: 100
height: 100
background: rgba(0, 0, 0, .3);
filter: progid:DXImageTransform.Microsoft.gradient(gradientType = 0, startColorstr = #, endColorstr = #;
:root .alpha{
/*for IE9*/
&div class=&alpha&&
(window.slotbydup=window.slotbydup || []).push({
id: '2467140',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467141',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467143',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467148',
container: s,
size: '1000,90',
display: 'inlay-fix'div css背景颜色半透明 文字不透明兼容ie、火狐等浏览器-前端开发爱好者
快乐、开心去编程着....
IE：外层filter，内层position:relative或absolute。FF：外层不使用opacity，而用background:rgba()。--------------------------------&!DOCTYPE HTML PUBLIC &-//W3C//DTD HTML 4.01 Transitional//EN&&&http://www.w3.org/TR/html4/loose.dtd&&&html&&&head&&&&title& New Document &/title&&&&meta name=&Generator& content=&EditPlus&&&&&meta name=&Author& content=&&&&&&meta name=&Keywords& content=&&&&&&meta name=&Description& content=&&&&&&style&&&&&&&&&#wrapper&&&&&&&&{&&&&&&&&&&& background:ű&&&&&&&&&&& width:300&&&&&&&&&&& height:150&&&&&&&&}&&&&&&&&#div1&&&&&&&&{&&&&&&&&&&&&-moz-opacity: 0.3;&/* FF 3.5以下&*/&&&&&&&&&&& opacity: 0.3;&/* FF 3.5及以上&*/&&&&&&&&&&& filter: alpha(opacity=30);&/* IE6及以上&*/&&&&&&&&&&& background:&#&&&&&&&&&&& width: 200&&&&&&&&&&& height: 50&&&&&&&&}&&&&&&&&#div2&&&&&&&&{&&&&&&&&&&& background: rgba(255, 255, 255, 0.3)&!&/* IE无效，FF有效&*/&&&&&&&&&&& background:&#&&&&&&&&&&& filter: alpha(opacity=30);&&&&&&&&&&& width: 200&&&&&&&&&&& height: 50&&&&&&&&}&&&&&&&&#div2 span&&&&&&&&{&&&&&&&&&&& position:&&&&&&&&}&&&&&/style&&&/head&&&body&&div id=&wrapper&&&&&&&&&&&div id=&div1&&&&&&&&&&&&&&&span&图层背景半透明，字体颜色也半透明&/span&&&&&&&&&&/div&&&&&&&&&&br /&&&&&&&&&&div id=&div2&&&&&&&&&&&&&&&span&图层背景半透明，字体颜色不半透明&/span&&&&&&&&&&/div&&&&&&/div&&&/body&&/html&
推荐了此文字
(C) —— Powered by后使用快捷导航没有帐号？
只需一步，快速开始
查看: 4726|回复: 9
如何让CSS定义的背景半透明而文字不透明？
UID170612在线时间 小时积分3248帖子离线16950 天注册时间
金牌会员, 积分 3248, 距离下一级还需 1752 积分
本帖最后由 xyflash 于
23:45 编辑
请在css里调整，布局尽量保持原样格式！
&!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.1//EN& &http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd&&
&html xmlns=&http://www.w3.org/1999/xhtml&&
&meta http-equiv=&Content-Type& content=&text/ charset=gb2312& /&
&title&CSS定义 背景半透明，文字不透明&/title&
&style type=&text/css&&
.test{float: margin:0 15 position:_display: width:200 height:175}
.test img{clear: margin:5px 5px 0 5 padding:2 position:top:0;left:0; max-width:180 height:155 border:1px solid #E2E2E2; z-index:1;}
.test .v{clear: margin:5px 5px 0 5 padding:3 position:top:0;left:0; width:180 height:155 overflow: z-index:2; display: background:#FFF; filter:alpha(opacity=30);-moz-opacity:0.3;opacity:0.3;}
.test .v:hover{color:#333333;}
.test .v .bg{border:0; position:top:70left:55 background:url(/img/iknow/home/bg.gif) 0 -190px no- width:27 height:27 display: cursor:}
.test .v span{float: position:top:70left:85 background:#FFF; border:1px solid #E0E0E0; min-width:30 line-height:24 text-align:}
&div class=&test&& &img alt=&& src=&/search/zhidao/jctuijian/jiaoshi2.jpg& width=&180& height=&155& /&
&p class=&v&&&span class=&bg&&&/span&&span&50&/span&&/p&
&div class=&test&& &img alt=&& src=&/search/zhidao/jctuijian/jiaoshi2.jpg& width=&180& height=&155& /&
&p class=&v&&&span class=&bg&&&/span&&span&50&/span&&/p&
&提示：您可以先修改部分代码再运行
要实现的功能：
1、图片上的覆盖那一层默认不显示，当鼠标移上后显示；
2、对于覆盖层鼠标移上后背景显示半透明，层里面的文字及小图片100%显示。
有劳大家协助 非常感谢！
用上js，ie6，ok[html]
CSS定义 背景半透明，文字不透明
.test{float: margin:0 15 position:_display: width:200 height:175}
.test img{clear: margin:5px 5px 0 5 padding:2 position:top:0;left:0; max-width:180 height:155 border:1px solid #E2E2E2; z-index:1;}
clear: margin:5px 5px 0 5 padding:3 position:top ...
UID324161在线时间 小时积分5075帖子离线16950 天注册时间
用上js，ie6，ok
&!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&&
&meta http-equiv=&Content-Type& content=&text/ charset=utf-8& /&
&title&CSS定义 背景半透明，文字不透明&/title&
&style type=&text/css&&
.test{float: margin:0 15 position:_display: width:200 height:175}
.test img{clear: margin:5px 5px 0 5 padding:2 position:top:0;left:0; max-width:180 height:155 border:1px solid #E2E2E2; z-index:1;}
clear: margin:5px 5px 0 5 padding:3 position:top:0;left:0; width:180 height:155 overflow: z-index:2; display:
background:rgba(255, 255, 255, 0.3);
.test:hover .v,.over .v{display:block}
.test .v .bg{
border:0; position:top:70left:55
background:url('/img/iknow/home/bg.gif') 0 -190px no-
width:27 height:27 display: cursor:
.test .v span{float: position:top:70left:85 background:#FFF; border:1px solid #E0E0E0; min-width:30 line-height:24 text-align:}
&!--[if lt IE 9]&
.test .v{filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4cFFFFFF,endColorstr=#4cFFFFFF);}
&![endif]--&
&!--[if IE 6]&
&![endif]--&
&script type=&text/javascript&&
window.onload = function(){
//document.getElementBytagName
&div class=&test& onmouseover=&this.className += ' over'& onmouseout=&this.className = 'test'&&
&img alt=&& src=&/search/zhidao/jctuijian/jiaoshi2.jpg& width=&180& height=&155& /&
&p class=&v&&&span class=&bg&&&/span&&span&50&/span&&/p&
&div class=&test& onmouseover=&this.className += ' over'& onmouseout=&this.className = 'test'&&
&img alt=&& src=&/search/zhidao/jctuijian/jiaoshi2.jpg& width=&180& height=&155& /&
&p class=&v&&&span class=&bg&&&/span&&span&50&/span&&/p&
&提示：您可以先修改部分代码再运行
UID324161在线时间 小时积分5075帖子离线16950 天注册时间
本帖最后由 yangedie 于
00:24 编辑
由于楼主用的是：hover，所以没有用js，ie6没反映
如果改布局，可以在不使用js的情况下支持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&&
&meta http-equiv=&Content-Type& content=&text/ charset=utf-8& /&
&title&CSS定义 背景半透明，文字不透明&/title&
&style type=&text/css&&
.test{float: margin:0 15 position:_display: width:200 height:175}
.test img{clear: margin:5px 5px 0 5 padding:2 position:top:0;left:0; max-width:180 height:155 border:1px solid #E2E2E2; z-index:1;}
clear: margin:5px 5px 0 5 padding:3 position:top:0;left:0; width:180 height:155 overflow: z-index:2; display:
background:rgba(255, 255, 255, 0.3);
.test:hover .v{display:block}
.test .v .bg{
border:0; position:top:70left:55
background:url('/img/iknow/home/bg.gif') 0 -190px no-
width:27 height:27 display: cursor:
.test .v span{float: position:top:70left:85 background:#FFF; border:1px solid #E0E0E0; min-width:30 line-height:24 text-align:}
&!--[if lt IE 9]&
.test .v{filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4cFFFFFF,endColorstr=#4cFFFFFF);}
&![endif]--&
&div class=&test&&
&img alt=&& src=&/search/zhidao/jctuijian/jiaoshi2.jpg& width=&180& height=&155& /&
&p class=&v&&&span class=&bg&&&/span&&span&50&/span&&/p&
&div class=&test&&
&img alt=&& src=&/search/zhidao/jctuijian/jiaoshi2.jpg& width=&180& height=&155& /&
&p class=&v&&&span class=&bg&&&/span&&span&50&/span&&/p&
&提示：您可以先修改部分代码再运行
UID324161在线时间 小时积分5075帖子离线16950 天注册时间
这样子写，看起来舒服些
&!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&&
&meta http-equiv=&Content-Type& content=&text/ charset=utf-8& /&
&title&CSS定义 背景半透明，文字不透明&/title&
&style type=&text/css&&
.test{float: margin:0 15 position:_display: width:200 height:175}
.test img{clear: margin:5px 5px 0 5 padding:2 position:top:0;left:0; max-width:180 height:155 border:1px solid #E2E2E2; z-index:1;}
clear: margin:5px 5px 0 5 padding:3 position:top:0;left:0; width:180 height:155 overflow: z-index:2; display:
background:rgba(255, 255, 255, 0.3);
.test:hover .v,.over .v{display:block}
.test .v .bg{
border:0; position:top:70left:55
background:url('/img/iknow/home/bg.gif') 0 -190px no-
width:27 height:27 display: cursor:
.test .v span{float: position:top:70left:85 background:#FFF; border:1px solid #E0E0E0; min-width:30 line-height:24 text-align:}
&!--[if lt IE 9]&
.test .v{filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4cFFFFFF,endColorstr=#4cFFFFFF);}
&![endif]--&
&!--[if IE 6]&
&script type=&text/javascript&&
window.onload = function(){
var divs = document.getElementsByTagName(&div&);
for(var i=0,j=divs.i&j;i++){
if(divs[i].className == &test&){
divs[i].onmouseover = function(){this.className += & over&;}
divs[i].onmouseout = function(){this.className = &test&;}
&![endif]--&
&div class=&test&&
&img alt=&& src=&/search/zhidao/jctuijian/jiaoshi2.jpg& width=&180& height=&155& /&
&p class=&v&&&span class=&bg&&&/span&&span&50&/span&&/p&
&div class=&test&&
&img alt=&& src=&/search/zhidao/jctuijian/jiaoshi2.jpg& width=&180& height=&155& /&
&p class=&v&&&span class=&bg&&&/span&&span&50&/span&&/p&
&提示：您可以先修改部分代码再运行
UID550840在线时间 小时积分1199帖子离线16950 天注册时间
银牌会员, 积分 1199, 距离下一级还需 1801 积分
不用js的话 很蛋疼啊 纠结的很
UID170612在线时间 小时积分3248帖子离线16950 天注册时间
金牌会员, 积分 3248, 距离下一级还需 1752 积分
那就修改修改布局 能不用JS更好！非常感谢！
UID606598在线时间 小时积分50464帖子离线16950 天注册时间
div&a这样的结构完全可以，但是只有css是无法解决IE6的
UID369634在线时间 小时积分495帖子离线16950 天注册时间
中级会员, 积分 495, 距离下一级还需 5 积分
本帖最后由 xcondor 于
10:42 编辑
&!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.1//EN& &http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd&&
&html xmlns=&http://www.w3.org/1999/xhtml&&
&meta http-equiv=&Content-Type& content=&text/ charset=gb2312& /&
&title&CSS定义 背景半透明，文字不透明&/title&
&style type=&text/css&&
.test{float: margin:0 15 position:_display: width:200 height:175}
.test img{clear: margin:5px 5px 0 5 padding:2 position:top:0;left:0; max-width:180 height:155 border:1px solid #E2E2E2; z-index:1;}
.test .v{clear: margin:5px 5px 0 5 padding:3 position:top:0;left:0; width:180 height:155 overflow:display:background:rgba(255, 255, 255, 0.3);progid:DXImageTransform.Microsoft.gradient(startColorstr=#3363370b,endColorstr=#3363370b);z-index:10;}
.test .v:hover{color:#000;}
.test .v .bg{border:0; position:top:70left:55 background:url([url]/img/iknow/home/bg.gif[/url]) 0 -190px no- width:27 height:27 display: cursor:}
.test .v span{float: position:top:70left:85
min-width:30 line-height:24 text-align:}
&div id=&box&&
&div class=&test&& &img alt=&& src=&/search/zhidao/jctuijian/jiaoshi2.jpg& width=&180& height=&155& /&
&p class=&v&&&span class=&bg&&&/span&&span&50&/span&&/p&
&div class=&test&& &img alt=&& src=&/search/zhidao/jctuijian/jiaoshi2.jpg& width=&180& height=&155& /&
&p class=&v&&&span class=&bg&&&/span&&span&50&/span&&/p&
&script type=&text/javascript&&
function getByClass(oParent,sClass){
var aEle = document.getElementsByTagName('*');
var i = 0;
var aResult = [];
for(i=0;i&aEle.i++){
if(aEle[i].className == sClass){
aResult.push(aEle[i]);
window.onload = function(){
var oBox = document.getElementById('box');
var oTest = getByClass(oBox,'test');
var oP = getByClass(oBox,'v');
var oSpan = getByClass(oBox,'bg');
var i = 0;
for(i=0;i&oTest.i++){
oTest[i].index =
oTest[i].onmouseover=function(){
oP[this.index].style.display='block';
oSpan[this.index].style.display='block';
oTest[i].onmouseout=function(){
oP[this.index].style.display='none';
oSpan[this.index].style.display='none';
&提示：您可以先修改部分代码再运行
刚好像丢了个东西！
补充内容 ( 10:48):
这个里面好像小图片没显示，我本地是显示了的。你把代码出去看看。
补充内容 ( ):
bg的图片url错了。
UID587336在线时间 小时积分81帖子离线16950 天注册时间
初级会员, 积分 81, 距离下一级还需 119 积分
filter是IE专用属性
UID460034在线时间 小时积分2083帖子离线16950 天注册时间
银牌会员, 积分 2083, 距离下一级还需 917 积分
本帖最后由 xfcmamb 于
12:26 编辑
没有用 js ，看看。
&!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.1//EN& &http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd&&
&html xmlns=&http://www.w3.org/1999/xhtml&&
&meta http-equiv=&Content-Type& content=&text/ charset=gb2312& /&
&title&CSS定义 背景半透明，文字不透明&/title&
&style type=&text/css&&
.test { float: margin:0 15 position: _display: width:200 height:175 }
img { border:0}
.test { position:}
.test .bg { display: position: left:0; top:0; width:180 height:155 vertical-align: }
.test a { display: width:180 height:155 text-decoration:}
.test a:hover { display:}
.test a:hover .bg { display:
filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#4cffffff', EndColorStr='#4cffffff');
background:none repeat scroll 0 0 rgba(255, 255, 255, 0.5);
.test .txt { display:inline- width:180 height:155 line-height:155 text-align: font:bold 50px/155px Microsoft Y color:#f00;}
&div class=&test&&
&a href=&###&&
&img alt=&& src=&/search/zhidao/jctuijian/jiaoshi2.jpg& width=&180& height=&155& /&
&span class=&bg&&&span class=&ico&&&/span&&span class=&txt&&50&/span&&/span&
&提示：您可以先修改部分代码再运行
Powered by}
CSS实现背景透明/半透明效果但内容文字不透明（兼容IE，FF，OP等浏览器 op浏览器
所属栏目：
针对透明背景，包括背景图片和背景色（兼容IE，FF，OP等浏览器）一、背景完全透明.bg{background:transparent}二、背景半透明这里要分两个div，一个单独设置背景透明度，另外一个放内容 margin-top:-33使用这个方法让文字叠加在透明背景图上。css:.bg{ width: 1000 height:33background-color:#background-image:url(img.jpg); filter:alpha(opacity=30);-moz-opacity:0.3;opacity:0.3;-khtml-opacity: 0.3;}.contnet{margin-top:-33 width:500height:33 overflow:}html:&div&&/div&&div&这里是文字部分不透明&/div&欢迎您转载分享：
更多精彩：兼容IE6的纯CSS背景半透明文字不透明
&!DOCTYPE &
&html lang=&en&&
&meta charset=&UTF-8&&
IE背景半透明
&style type=&text/css&&
width: 100
height: 100
background: rgba(0, 0, 0, .3);
filter: progid:DXImageTransform.Microsoft.gradient(gradientType = 0, startColorstr = #, endColorstr = #;
:root .alpha{
/*for IE9*/
&div class=&alpha&&
(window.slotbydup=window.slotbydup || []).push({
id: '2467140',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467141',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467143',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467148',
container: s,
size: '1000,90',
display: 'inlay-fix'div css背景颜色半透明 文字不透明兼容ie、火狐等浏览器-前端开发爱好者
快乐、开心去编程着....
IE：外层filter，内层position:relative或absolute。FF：外层不使用opacity，而用background:rgba()。--------------------------------&!DOCTYPE HTML PUBLIC &-//W3C//DTD HTML 4.01 Transitional//EN&&&http://www.w3.org/TR/html4/loose.dtd&&&html&&&head&&&&title& New Document &/title&&&&meta name=&Generator& content=&EditPlus&&&&&meta name=&Author& content=&&&&&&meta name=&Keywords& content=&&&&&&meta name=&Description& content=&&&&&&style&&&&&&&&&#wrapper&&&&&&&&{&&&&&&&&&&& background:ű&&&&&&&&&&& width:300&&&&&&&&&&& height:150&&&&&&&&}&&&&&&&&#div1&&&&&&&&{&&&&&&&&&&&&-moz-opacity: 0.3;&/* FF 3.5以下&*/&&&&&&&&&&& opacity: 0.3;&/* FF 3.5及以上&*/&&&&&&&&&&& filter: alpha(opacity=30);&/* IE6及以上&*/&&&&&&&&&&& background:&#&&&&&&&&&&& width: 200&&&&&&&&&&& height: 50&&&&&&&&}&&&&&&&&#div2&&&&&&&&{&&&&&&&&&&& background: rgba(255, 255, 255, 0.3)&!&/* IE无效，FF有效&*/&&&&&&&&&&& background:&#&&&&&&&&&&& filter: alpha(opacity=30);&&&&&&&&&&& width: 200&&&&&&&&&&& height: 50&&&&&&&&}&&&&&&&&#div2 span&&&&&&&&{&&&&&&&&&&& position:&&&&&&&&}&&&&&/style&&&/head&&&body&&div id=&wrapper&&&&&&&&&&&div id=&div1&&&&&&&&&&&&&&&span&图层背景半透明，字体颜色也半透明&/span&&&&&&&&&&/div&&&&&&&&&&br /&&&&&&&&&&div id=&div2&&&&&&&&&&&&&&&span&图层背景半透明，字体颜色不半透明&/span&&&&&&&&&&/div&&&&&&/div&&&/body&&/html&
推荐了此文字
(C) —— Powered by后使用快捷导航没有帐号？
只需一步，快速开始
查看: 4726|回复: 9
如何让CSS定义的背景半透明而文字不透明？
UID170612在线时间 小时积分3248帖子离线16950 天注册时间
金牌会员, 积分 3248, 距离下一级还需 1752 积分
本帖最后由 xyflash 于
23:45 编辑
请在css里调整，布局尽量保持原样格式！
&!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.1//EN& &http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd&&
&html xmlns=&http://www.w3.org/1999/xhtml&&
&meta http-equiv=&Content-Type& content=&text/ charset=gb2312& /&
&title&CSS定义 背景半透明，文字不透明&/title&
&style type=&text/css&&
.test{float: margin:0 15 position:_display: width:200 height:175}
.test img{clear: margin:5px 5px 0 5 padding:2 position:top:0;left:0; max-width:180 height:155 border:1px solid #E2E2E2; z-index:1;}
.test .v{clear: margin:5px 5px 0 5 padding:3 position:top:0;left:0; width:180 height:155 overflow: z-index:2; display: background:#FFF; filter:alpha(opacity=30);-moz-opacity:0.3;opacity:0.3;}
.test .v:hover{color:#333333;}
.test .v .bg{border:0; position:top:70left:55 background:url(/img/iknow/home/bg.gif) 0 -190px no- width:27 height:27 display: cursor:}
.test .v span{float: position:top:70left:85 background:#FFF; border:1px solid #E0E0E0; min-width:30 line-height:24 text-align:}
&div class=&test&& &img alt=&& src=&/search/zhidao/jctuijian/jiaoshi2.jpg& width=&180& height=&155& /&
&p class=&v&&&span class=&bg&&&/span&&span&50&/span&&/p&
&div class=&test&& &img alt=&& src=&/search/zhidao/jctuijian/jiaoshi2.jpg& width=&180& height=&155& /&
&p class=&v&&&span class=&bg&&&/span&&span&50&/span&&/p&
&提示：您可以先修改部分代码再运行
要实现的功能：
1、图片上的覆盖那一层默认不显示，当鼠标移上后显示；
2、对于覆盖层鼠标移上后背景显示半透明，层里面的文字及小图片100%显示。
有劳大家协助 非常感谢！
用上js，ie6，ok[html]
CSS定义 背景半透明，文字不透明
.test{float: margin:0 15 position:_display: width:200 height:175}
.test img{clear: margin:5px 5px 0 5 padding:2 position:top:0;left:0; max-width:180 height:155 border:1px solid #E2E2E2; z-index:1;}
clear: margin:5px 5px 0 5 padding:3 position:top ...
UID324161在线时间 小时积分5075帖子离线16950 天注册时间
用上js，ie6，ok
&!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&&
&meta http-equiv=&Content-Type& content=&text/ charset=utf-8& /&
&title&CSS定义 背景半透明，文字不透明&/title&
&style type=&text/css&&
.test{float: margin:0 15 position:_display: width:200 height:175}
.test img{clear: margin:5px 5px 0 5 padding:2 position:top:0;left:0; max-width:180 height:155 border:1px solid #E2E2E2; z-index:1;}
clear: margin:5px 5px 0 5 padding:3 position:top:0;left:0; width:180 height:155 overflow: z-index:2; display:
background:rgba(255, 255, 255, 0.3);
.test:hover .v,.over .v{display:block}
.test .v .bg{
border:0; position:top:70left:55
background:url('/img/iknow/home/bg.gif') 0 -190px no-
width:27 height:27 display: cursor:
.test .v span{float: position:top:70left:85 background:#FFF; border:1px solid #E0E0E0; min-width:30 line-height:24 text-align:}
&!--[if lt IE 9]&
.test .v{filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4cFFFFFF,endColorstr=#4cFFFFFF);}
&![endif]--&
&!--[if IE 6]&
&![endif]--&
&script type=&text/javascript&&
window.onload = function(){
//document.getElementBytagName
&div class=&test& onmouseover=&this.className += ' over'& onmouseout=&this.className = 'test'&&
&img alt=&& src=&/search/zhidao/jctuijian/jiaoshi2.jpg& width=&180& height=&155& /&
&p class=&v&&&span class=&bg&&&/span&&span&50&/span&&/p&
&div class=&test& onmouseover=&this.className += ' over'& onmouseout=&this.className = 'test'&&
&img alt=&& src=&/search/zhidao/jctuijian/jiaoshi2.jpg& width=&180& height=&155& /&
&p class=&v&&&span class=&bg&&&/span&&span&50&/span&&/p&
&提示：您可以先修改部分代码再运行
UID324161在线时间 小时积分5075帖子离线16950 天注册时间
本帖最后由 yangedie 于
00:24 编辑
由于楼主用的是：hover，所以没有用js，ie6没反映
如果改布局，可以在不使用js的情况下支持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&&
&meta http-equiv=&Content-Type& content=&text/ charset=utf-8& /&
&title&CSS定义 背景半透明，文字不透明&/title&
&style type=&text/css&&
.test{float: margin:0 15 position:_display: width:200 height:175}
.test img{clear: margin:5px 5px 0 5 padding:2 position:top:0;left:0; max-width:180 height:155 border:1px solid #E2E2E2; z-index:1;}
clear: margin:5px 5px 0 5 padding:3 position:top:0;left:0; width:180 height:155 overflow: z-index:2; display:
background:rgba(255, 255, 255, 0.3);
.test:hover .v{display:block}
.test .v .bg{
border:0; position:top:70left:55
background:url('/img/iknow/home/bg.gif') 0 -190px no-
width:27 height:27 display: cursor:
.test .v span{float: position:top:70left:85 background:#FFF; border:1px solid #E0E0E0; min-width:30 line-height:24 text-align:}
&!--[if lt IE 9]&
.test .v{filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4cFFFFFF,endColorstr=#4cFFFFFF);}
&![endif]--&
&div class=&test&&
&img alt=&& src=&/search/zhidao/jctuijian/jiaoshi2.jpg& width=&180& height=&155& /&
&p class=&v&&&span class=&bg&&&/span&&span&50&/span&&/p&
&div class=&test&&
&img alt=&& src=&/search/zhidao/jctuijian/jiaoshi2.jpg& width=&180& height=&155& /&
&p class=&v&&&span class=&bg&&&/span&&span&50&/span&&/p&
&提示：您可以先修改部分代码再运行
UID324161在线时间 小时积分5075帖子离线16950 天注册时间
这样子写，看起来舒服些
&!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&&
&meta http-equiv=&Content-Type& content=&text/ charset=utf-8& /&
&title&CSS定义 背景半透明，文字不透明&/title&
&style type=&text/css&&
.test{float: margin:0 15 position:_display: width:200 height:175}
.test img{clear: margin:5px 5px 0 5 padding:2 position:top:0;left:0; max-width:180 height:155 border:1px solid #E2E2E2; z-index:1;}
clear: margin:5px 5px 0 5 padding:3 position:top:0;left:0; width:180 height:155 overflow: z-index:2; display:
background:rgba(255, 255, 255, 0.3);
.test:hover .v,.over .v{display:block}
.test .v .bg{
border:0; position:top:70left:55
background:url('/img/iknow/home/bg.gif') 0 -190px no-
width:27 height:27 display: cursor:
.test .v span{float: position:top:70left:85 background:#FFF; border:1px solid #E0E0E0; min-width:30 line-height:24 text-align:}
&!--[if lt IE 9]&
.test .v{filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4cFFFFFF,endColorstr=#4cFFFFFF);}
&![endif]--&
&!--[if IE 6]&
&script type=&text/javascript&&
window.onload = function(){
var divs = document.getElementsByTagName(&div&);
for(var i=0,j=divs.i&j;i++){
if(divs[i].className == &test&){
divs[i].onmouseover = function(){this.className += & over&;}
divs[i].onmouseout = function(){this.className = &test&;}
&![endif]--&
&div class=&test&&
&img alt=&& src=&/search/zhidao/jctuijian/jiaoshi2.jpg& width=&180& height=&155& /&
&p class=&v&&&span class=&bg&&&/span&&span&50&/span&&/p&
&div class=&test&&
&img alt=&& src=&/search/zhidao/jctuijian/jiaoshi2.jpg& width=&180& height=&155& /&
&p class=&v&&&span class=&bg&&&/span&&span&50&/span&&/p&
&提示：您可以先修改部分代码再运行
UID550840在线时间 小时积分1199帖子离线16950 天注册时间
银牌会员, 积分 1199, 距离下一级还需 1801 积分
不用js的话 很蛋疼啊 纠结的很
UID170612在线时间 小时积分3248帖子离线16950 天注册时间
金牌会员, 积分 3248, 距离下一级还需 1752 积分
那就修改修改布局 能不用JS更好！非常感谢！
UID606598在线时间 小时积分50464帖子离线16950 天注册时间
div&a这样的结构完全可以，但是只有css是无法解决IE6的
UID369634在线时间 小时积分495帖子离线16950 天注册时间
中级会员, 积分 495, 距离下一级还需 5 积分
本帖最后由 xcondor 于
10:42 编辑
&!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.1//EN& &http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd&&
&html xmlns=&http://www.w3.org/1999/xhtml&&
&meta http-equiv=&Content-Type& content=&text/ charset=gb2312& /&
&title&CSS定义 背景半透明，文字不透明&/title&
&style type=&text/css&&
.test{float: margin:0 15 position:_display: width:200 height:175}
.test img{clear: margin:5px 5px 0 5 padding:2 position:top:0;left:0; max-width:180 height:155 border:1px solid #E2E2E2; z-index:1;}
.test .v{clear: margin:5px 5px 0 5 padding:3 position:top:0;left:0; width:180 height:155 overflow:display:background:rgba(255, 255, 255, 0.3);progid:DXImageTransform.Microsoft.gradient(startColorstr=#3363370b,endColorstr=#3363370b);z-index:10;}
.test .v:hover{color:#000;}
.test .v .bg{border:0; position:top:70left:55 background:url([url]/img/iknow/home/bg.gif[/url]) 0 -190px no- width:27 height:27 display: cursor:}
.test .v span{float: position:top:70left:85
min-width:30 line-height:24 text-align:}
&div id=&box&&
&div class=&test&& &img alt=&& src=&/search/zhidao/jctuijian/jiaoshi2.jpg& width=&180& height=&155& /&
&p class=&v&&&span class=&bg&&&/span&&span&50&/span&&/p&
&div class=&test&& &img alt=&& src=&/search/zhidao/jctuijian/jiaoshi2.jpg& width=&180& height=&155& /&
&p class=&v&&&span class=&bg&&&/span&&span&50&/span&&/p&
&script type=&text/javascript&&
function getByClass(oParent,sClass){
var aEle = document.getElementsByTagName('*');
var i = 0;
var aResult = [];
for(i=0;i&aEle.i++){
if(aEle[i].className == sClass){
aResult.push(aEle[i]);
window.onload = function(){
var oBox = document.getElementById('box');
var oTest = getByClass(oBox,'test');
var oP = getByClass(oBox,'v');
var oSpan = getByClass(oBox,'bg');
var i = 0;
for(i=0;i&oTest.i++){
oTest[i].index =
oTest[i].onmouseover=function(){
oP[this.index].style.display='block';
oSpan[this.index].style.display='block';
oTest[i].onmouseout=function(){
oP[this.index].style.display='none';
oSpan[this.index].style.display='none';
&提示：您可以先修改部分代码再运行
刚好像丢了个东西！
补充内容 ( 10:48):
这个里面好像小图片没显示，我本地是显示了的。你把代码出去看看。
补充内容 ( ):
bg的图片url错了。
UID587336在线时间 小时积分81帖子离线16950 天注册时间
初级会员, 积分 81, 距离下一级还需 119 积分
filter是IE专用属性
UID460034在线时间 小时积分2083帖子离线16950 天注册时间
银牌会员, 积分 2083, 距离下一级还需 917 积分
本帖最后由 xfcmamb 于
12:26 编辑
没有用 js ，看看。
&!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.1//EN& &http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd&&
&html xmlns=&http://www.w3.org/1999/xhtml&&
&meta http-equiv=&Content-Type& content=&text/ charset=gb2312& /&
&title&CSS定义 背景半透明，文字不透明&/title&
&style type=&text/css&&
.test { float: margin:0 15 position: _display: width:200 height:175 }
img { border:0}
.test { position:}
.test .bg { display: position: left:0; top:0; width:180 height:155 vertical-align: }
.test a { display: width:180 height:155 text-decoration:}
.test a:hover { display:}
.test a:hover .bg { display:
filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#4cffffff', EndColorStr='#4cffffff');
background:none repeat scroll 0 0 rgba(255, 255, 255, 0.5);
.test .txt { display:inline- width:180 height:155 line-height:155 text-align: font:bold 50px/155px Microsoft Y color:#f00;}
&div class=&test&&
&a href=&###&&
&img alt=&& src=&/search/zhidao/jctuijian/jiaoshi2.jpg& width=&180& height=&155& /&
&span class=&bg&&&span class=&ico&&&/span&&span class=&txt&&50&/span&&/span&
&提示：您可以先修改部分代码再运行
Powered by}
我要回帖
更多关于 css二级导航菜单 的文章
更多推荐
- ·无人机保险费的价格哪家保险公司可以投保？
- ·网银转账24小时可撤销跨行转账？
- ·政府提供纯公共物品和准公共物品举例的方式及特点
- ·遍地美女全球一夫多妻制的国家伊朗，石油储量丰富，为何经济却落后贫穷？
- ·天安人寿逸享人生年金保险解读保险公司怎么样可靠吗
- ·自己喝药死.对方父母要负担负养费吗?男方出轨离婚财产分割当场写下合同有用吗?
- ·汽车销售要销售烟酒交什么税税，一共百分之多少？
- ·想在光谷哪里买房最好软件园附近买房 不知买哪个楼盘
- ·信用卡复利的计算方法帐单日15号16号全额还清会有复利产生吗
- ·普滨加油卡1000元加油卡和8000元的区别
- ·这样跨省买房算二套房吗吗
- ·微盟代理和互联youtube在线代理理有什么区别
- ·什么中国钱好挣消费低？
- ·本人是股票卖掉后多久到账新手，什么也不知道。前段时间卖掉了一支不错的股票卖掉后多久到账，买了一支不怎么涨，但一跌就很厉害的股票卖掉后多久到账
- ·访问谷歌网站方法
- ·怎样下电脑软件搬家搬家软件
- ·救命啊，我把放在C盘的文件误删了，怎么恢复
- ·深圳微信抢红包控制器牛牛有没有控制器
- ·css 二级分类背景背景颜色透明 css字看不清了
- ·excel计算公式公式问题
- ·未插入内卡但连卜无线电网小米4不能正常通话话吗
- ·百度云小狗的抓子总是爪墙，墙上都是血打它也我不听我不听，请问是怎么回事？
- ·瓷娃娃求助遭推诿，卸载了旧版的想更新355.60，结果悲剧了
- ·群主日是哪一天？
- ·方正宽带网速慢怎么办怎么样？谁家用过？
- ·然而我一进jbar看见的都是些什么转票求票的贴子
- ·谁能告诉我 歌词怎么办阿？灰色的点不了，一直都是2G网。。。
- ·联想erazer d310换cpu和显卡，换那个型号
- ·2015上半年，哪些省份登上新华日报人民日报头版头条
- ·DWE205ADA0101双馈什么是变流器器多少钱
- ·数学中的分步法用什么图标最合适?
- ·你好。你有bt3吗？ bt3破解wifi教程用 可以发给我吗
- ·如何网上定位查找别人所在我目前的准确位置置
- ·注册淘宝账号它会送一个淘宝帐号和支付宝帐号号吗
