Question

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

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

我已经研究过使用CSS3但没有运气，我希望将加载时间保持在最低限度，因此不想使用图像。

Answer 1

使用纯CSS / CSS3无法实现这一点。

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

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

Answer 2

代码应该是这样的： -

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>

Answer 3

在不使用图像的情况下，在纯CSS中执行此操作的另一种方法是使用自定义字体。您所要做的就是查找/创建一个字体，其中字符是带黑色背景的透明字母。与this font

类似

您可以在服务器上放置适当的字体，然后使用CSS @font-face规则

将其导入

Answer 4

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

您的代码看起来像这样

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>

Answer 5

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

如何在不使用css更改图像的情况下使文本透明

5 个答案: