【问题标题】:Text/Links background should be transparent over a gradient background but is in white文本/链接背景应在渐变背景上透明,但为白色
【发布时间】:2011-03-05 17:35:41
【问题描述】:

我有一个小问题。我开始为自己设计一个新网站,www.dvpwebdesign.com。我目前只是在上面使用 html 和 css。我遇到的问题是 IE,我的介绍页面有一个重复的渐变背景,上面有链接/文本。在 Safari、Firefox 上一切正常,但在可怕的 IE 上却不行,它在文本后面显示白色背景。屏幕的其余部分具有正确的渐变背景。我知道您应该使用背景颜色:无,我确实这样做了。我也尝试了背景颜色:透明,都无济于事。如果有人可以帮助我会非常感激?下面是 CSS,您可以从现场获取 html,在此先感谢:

body {
margin: 0;
padding: 0;
background-color: none;
width:1000px;
background-image: url(gradient4.jpg);
background-repeat: repeat-x;
}



 #menu a{
    color:#a0a0a0;
    font-weight:normal;
    text-decoration:none;
    font-size:14px;
    margin-left:10px;
    margin-top:-35px;
    font-family: Skia;


    }
#menu a span.two{
    color:#33ccff;
    cursor:pointer;
        font-size:14px;
        font-weight:500px;
    font-family: Skia;

}

     #menutwo a{
    color:#9966ff;
    font-weight:normal;
    text-decoration:none;
    font-size:12px;
    margin-left:10px;
    margin-top:-35px;
    font-family: Skia;

}
#menutwo a span.two{
    color:#660099;
    cursor:pointer;
        font-size:12px;
    font-family: Skia;

}
#menuthree a{
    color:#c8c8c8;
    font-weight:normal;
    text-decoration:none;
    font-size:80px;
    font-family: Skia;


    }
#menuthree a span.two{
    color:#33ccff;
    cursor:pointer;
        font-size:80px;
    font-family: Skia;

}

     #menufour a{
    color:#b8b8b8;
    font-weight:normal;
    text-decoration:none;
    font-size:42px;
    font-family: Skia;


}
#menufour a span.two{
    color:#339999;
    cursor:pointer;
        font-size:42px;
    font-family: Skia;
}

     #menufive a{
    color:#a8a8a8;
    font-weight:normal;
    text-decoration:none;
    font-size:22px;
    font-family: Skia;


}
#menufive a span.two{
    color:#0066ff;
    cursor:pointer;
        font-size:22px;
    font-family: Skia;
}



ul#menu {
width : 1000px;
list-style-type : none;
position : relative;
margin-top:20px;
margin-right:230px;
float: right;
display:inline;
    font-family: Skia;

letter-spacing: 1px;
}

#menu li {float: right;                
display:inline;}

ul#menutwo {
width : 1000px;
letter-spacing: 1px;
margin-top:-10px;
margin-bottom:20px;
list-style-type : none;
position : relative;
float: right;
display:inline;
font-size:24px;
    font-family: Skia;
margin-right:180px;
}

#menutwo li {float: right;                
display:inline;}

ul#menuthree {
width : 1000px;
letter-spacing: 1px;
list-style-type : none;
position : relative;
float: left;
display:inline;
    font-family: Skia;

top: 300px;
}

#menuthree li {float: left;                
display:inline;}

ul#menufour {
width : 1000px;
letter-spacing: 1px;
list-style-type : none;
position : relative;
float: left;
display:inline;
    font-family: Skia;

top: 320px;

}

#menufour li {float: left;                
display:inline;}

ul#menufive {
width : 1000px;
letter-spacing: 1px;
list-style-type : none;
position : relative;
float: left;
display:inline;
    font-family: Skia;

top: 340px;

}

#menufive li {float: left;                
display:inline;}

【问题讨论】:

  • 而且您知道,顺便说一句,Skia 字体不会出现在除您的计算机(以及可能安装的其他少数计算机)之外的任何计算机上?
  • 对不起,我忘了提到链接有一些 Jquery。在 Safari、Firefox 和 Opera 上一切正常,只是在 IE 上不行。
  • 直播链接:www.dvpwebdesign.com
  • 嗨 Pekka,是的,我知道 Skia 字体会在某些浏览器上更改为默认字体。我现在只是在做实验。
  • 它确实在 IE6 中显示为白色。您确定将background-color: transparent 应用于正确的元素吗?你试过把它交给a和里面的span吗?

标签: html css


【解决方案1】:

您的一些 jQuery 恶作剧必须将背景颜色应用为内联样式。

这是我在 IE 8 的跨度开发者工具中得到的:

filter: alpha(opacity=100); ZOOM: 1; background: #fff;

更新:在这里。在fadelinks.js

var bgcolor = "#fff";   // unfortunately we have to set bg color because of that freakin' IE *!$%#!!?!?%$! 
                        //please use the same background color in your links as it is in your document. 

【讨论】:

  • 哦,对了,我从来没有发现过。请问你是怎么这么快找到这个的?
  • @DVP 我使用 IE8 中的开发人员工具(按 F12,并通过元素树导航到链接元素)发现有一个内联样式集。它没有在 HTML 源代码中设置,所以它一定是由脚本添加的。因此,请查看所有 JavaScript。 fadelinks.js 是一个明显的嫌疑人,因为它旨在干预链接,所以我打开它并看到了 #fff
  • 干杯 Pekka,我会试试的,周末愉快。
  • 问题是,当我使用渐变背景而不是网页颜色背景时,我应该将背景颜色的 fadelinks.js 属性更改为什么?我尝试选择“无”,但这会停止所有链接颜色的工作并仅显示为灰色。
  • @DVP 试试transparent。如果这不起作用,您可能会遇到问题,因为这可能是明确设置背景颜色的原因......
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2011-07-26
  • 1970-01-01
  • 2013-03-22
  • 1970-01-01
  • 2014-08-21
  • 1970-01-01
  • 2015-06-15
相关资源
最近更新 更多