1

如何将徽标链接到主页并且还具有 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;
}
4

4 回答 4

1

你的失踪display:inline-block;

比较这个小提琴和这个

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

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

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

Inline意味着只占用你需要的空间，并让其他元素与我一起坐在流动中。您的 a 标签中没有文字。所以它不需要占用任何空间，所以它不需要。

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

另一种选择是block，这意味着占据一整行，不要让任何东西在我旁边流动

于 2013-10-18T12:04:45.310 回答
1

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

JSFiddle 演示

#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;
}
于 2013-10-18T12:09:23.787 回答
0

可访问的方式是

<h1><a href=...><img src=... alt=... border=0></a></h1>
于 2013-10-18T14:00:46.953 回答
-1

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

于 2013-10-18T12:06:57.633 回答