2024-01-11 10:00:02

使用css隐藏文本

我有一个标签在我的html像这样:

<h1>My Website Title Here</h1>

使用css我想替换文字与我的实际标志。我已经得到的标志没有问题,通过调整标签和把背景图像通过css。然而,我不知道如何去掉这段文字。我以前见过,基本上就是把文字从屏幕上推开。问题是我不记得在哪里看到的。


当前回答

h1{
   background:url("../images/logo.png") no-repeat;
   height:180px;
   width:200px;
   display:inline-block;
   font-size:0px !important;
   text-intent:-9999999px !important;
   color:transparent !important;
 }

其他回答

你可以通过添加这个属性来隐藏你的文本:

font-size: 0 !important;

你可以使用CSS的background-image属性和z-index来确保图像保持在文本的前面。

最好的答案适用于短文本,但如果文本换行,它只会显示在图像中。

一种方法是用jquery处理程序捕获错误。尝试加载一个图像,如果失败,它会抛出一个错误。

$('#logo img').error(function(){
    $('#logo').html('<h1>My Website Title Here</h1>');
});

参见SAMPLE CODE

有这么多复杂的解决方案。

最简单的使用方法是:

color:rgba(0,0,0,0)

这对我来说适用于span(敲除验证)。

<span class="validationMessage">This field is required.</span>

.validationMessage {
    background-image: url('images/exclamation.png');
    background-repeat: no-repeat;
    margin-left: 5px;
    width: 16px;
    height: 16px;
    vertical-align: top;

    /* Hide the text. */
    display: inline-block;
    overflow: hidden;
    font-size: 0px;
}