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

【问题标题】：how to make text transparent without changing to an image using css如何在不使用css更改为图像的情况下使文本透明
【发布时间】：2012-06-15 10:47:38
【问题描述】：

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

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

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

【问题讨论】：

标签： css

【解决方案1】：

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

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

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

【讨论】：

是的，我只是想匹配左侧的方形徽标，以便在滚动时显示其余设计。

【解决方案2】：

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

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

【讨论】：

是的，我昨晚自己就有了这个想法，尽管我需要 Nevis 字体字形，然后在字体软件中对其进行编辑，而这些并不容易找到。
@SamMarchant 现在我想到了，添加自定义字体对于加载时间和图像一样糟糕。恐怕图像毕竟是这里最好的解决方案。只需通过保持颜色空间尽可能小来减小它们的大小。另一种选择是尝试使用 SVG。但是，对于简单的大图像，文件大小的减小最为明显。它们真的很小，因此代码也可以像图片一样占用空间。

【解决方案3】：

代码应该是这样的：-

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>

【讨论】：

但这也改变了背景不透明度，我只想定位文本。
您可以应用一个简单的技巧，将文本包装在 <span> 中，然后降低其不透明度。例如像这样<a href="#"><span></span></a> 所以新的css选择器将是nav a.current span { }

【解决方案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>

【讨论】：

【解决方案5】：

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

【讨论】：