1

我有一个导航栏，它告诉用户通过更改文本颜色和黑色背景选择了哪个页面。我只想使当前页面导航中的文本透明。

此处的示例：sammarchant.co.uk/new - 向下滚动到灰色区域以查看

我已经使用 CSS3 进行了研究，但没有运气，我想将加载时间降到最低，因此不想使用图像。

4

5 回答 5

1

这对于普通的 CSS/CSS3 是不可能的。

即使您确实使文本透明，滚动到灰色区域时它也不会显示为灰色。如果文本是透明的，它将在其后面显示黑色背景。

但是，您可以使用一些 javascript 来检测背景是什么，并据此更改字体的颜色。

于 2012-06-15T10:50:55.993 回答
0

代码应该是这样的： -

nav a.current {
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter: alpha(opacity=50);
    -moz-opacity:0.5;
    -khtml-opacity: 0.5;
    opacity: 0.5;
}

编辑：根据您的评论添加此

CSS:
nav a.current span {
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter: alpha(opacity=50);
    -moz-opacity:0.5;
    -khtml-opacity: 0.5;
    opacity: 0.5;
}

HTML:
<nav>
    <ul>
       <li><a href="#"><span>Link></span><a></li>
    </ul>
</nav>
于 2012-06-15T10:54:19.563 回答
0

在纯 CSS 中不使用图像的另一种方法是使用自定义字体。您所要做的就是找到/创建一个字体，其中的字符是黑色背景的透明字母。类似于这个字体

您可以在服务器上放置适当的字体并使用 CSS @font-face规则将其导入

于 2012-06-15T10:57:58.263 回答
0

你使用白色作为文本颜色和黑色作为背景，所以如果它的 trnaparent 它看起来像灰色

你的代码看起来像这样

css
    nav a.current {
        background:black;
        color: white;
        padding: 5px;
        -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /* For IE*/
        filter: alpha(opacity=50);  
        -moz-opacity:0.5;
        -khtml-opacity: 0.5;    
        opacity: 0.5;
    }


Html

    <nav>
         <a class="current" href="index.html">home</a>             
    </nav>
于 2012-06-15T11:27:02.563 回答
0

制作fontsize:0px。您将获得透明的文本。

于 2014-01-29T15:01:53.247 回答