Question

如何将徽标链接到主页并且还有h1但不可见

我有这样的布局

 <header id="pageHeader">
                    <h1>
                        <a href="<?php bloginfo('url'); ?>">
                        <?php bloginfo('name'); ?>
                        </a>
                    </h1>

然后我用css将图像作为背景，但徽标没有加载，任何人？

  header#pageHeader h1 a {
  width:130px;
  height:70px;
  text-indent:-9999px;
  background:url(/pict/logo.png);
  background-repeat: no-repeat;
}

Answer 1

您遗失的display:inline-block;

将this fiddle与this one

进行比较

此question中突出显示的差异，引用如下：

<强>内联块
该值使元素生成内联级块容器。内联块的内部被格式化为块框，元素本身被格式化为原子内联级框。   的内联
该值使元素生成一个或多个内联框。

很抱歉解释为什么会这样：

Inline表示只占用您需要的空间，并允许其他元素与我一起坐在中。您的标签中没有文字。 所以它不需要占用任何空间，所以它没有。

inline-block表示占用我配置的任何空间（在CSS中定义），并允许元素在我旁边流动。所以这适用于宽度和高度，而内联不是

另一个选项是block，这意味着会占用一整行而不会让任何东西流到我旁边

Answer 2

简单的display:block或display:inline-block就是答案

JSFiddle Demo

#pageHeader h1 a {
    width:130px;
    height:70px;
    text-indent:-9999px;
    background:url(http://lorempixel.com/output/abstract-q-c-130-70-8.jpg);
    background-repeat: no-repeat;
    display:block;
}

Answer 3

可访问的方式是

<h1><a href=...><img src=... alt=... border=0></a></h1>

Answer 4

对于javascript修复，可以始终将onclick="location.href='yourblog';"添加到您的h1标记

如何使徽标访问h1

4 个答案: