HTML和CSS如何在将背景图像添加到该部分后隐藏文本

标签 html css background-image

谁能告诉我如何隐藏文本“JN” 在将背景图像添加到同一 block 之后?

HTML代码

<body>
    <header>
        <h1 class="logo">JN</h1>
        <nav>
            <ul>
                <li><a href="#about">About</a></li>
                <li><a href="#youtube">YouTube</a></li>
                <li><a href="#articles">Articles</a></li>
                <li><a href="#vine">Vine</a></li>
                <li><a href="#social">Social</a></li>
                <li><a href="#podcasts">Podcasts</a></li>
                <li><a href="#share">Share</a></li>
                <li><a href="#more">More</a></li>
            </ul>
        </nav>
        <a href="mailto:thisemailisforrandomstuffs@gmail.com">Email me</a>
    </header>
</body>

CSS代码

h1.logo {

    background-image: url(JN-website-logo-Transparent-background.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

最佳答案

您可以尝试 text-indent -9999px;。 这会将文本 9999px 移到网站范围的左侧。

只删除文本不是更容易吗?

关于HTML和CSS如何在将背景图像添加到该部分后隐藏文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33825182/

相关文章:

css - 想要使用 CSS 将 imagine 放置在 DIV 中但不显示图像?

JavaScript 不保存样式属性

javascript - 如何将文本对齐到标签的底部?

html - PHP 文件中的背景图像未显示

css - border none 属性并没有真正删除边框(视觉上)

html - 菜单打开时图像下降

html - 保持元素可见,但防止溢出其父元素?

html - 覆盖 CSS 属性。 !important 不起作用

javascript - 如何使用 javascript 将图像制作成链接,链接到另一个图像?

javascript - 为什么它没有出现在选项中的图像?