Question

是否可以使用display：none或text-indent将文本保留在徽标下而不隐藏它？我想把图像拿出来并在后面留下徽标。就像PSD层一样。并且不希望将徽标图像用作CSS background

<a href="/" title="Return to the homepage" id="logo">
  <img src="http://lorempixum.com/100/100" alt="Nike logo" />Logo Text
</a>

Answer 1

<强> HTML ：

<a href="/" title="Return to the homepage" id="logo">
    <img src="http://lorempixum.com/100/100" alt="Nike logo" /><span>Logo Text</span>
</a>

<强> CSS ：

a { display: block; position: relative; }
a span {
    display: block;
    position: absolute;
    top: 40%;
}

Answer 2

@jitendra;也许你必须玩css：

<强> CSS：

a { position:relative; }
img { position:absolute; top:0; left:0 }

<强> HTML：

<a href="/" title="Return to the homepage" id="logo">
  Logo Text<img src="http://lorempixum.com/100/100" alt="Nike logo" />
</a>

Answer 3

如果要隐藏文本，保留文本的目的是什么？如果您的目标是隐藏图像下方的文本以便于访问，您可能有兴趣知道，如果您只是将文本作为alt属性保留在图像上，大多数搜索引擎都不会对您造成错误。相反，您可能会发现一些故意隐藏内容的技术could prove detrimental to your cause。

如果同时显示图片和文字很重要，您可以尝试使用<span>在{{1}}上包装文本，然后在打印样式表中禁用它。< / p>

Answer 4

您可以通过为图片设置position: absolute来执行此操作。您可能还应该确保锚点与图像的大小相同，这样它就不会破坏页面上其他元素的布局。

img {
    position: absolute;
}

a {
    display: inline-block;
    height: 100px; 
    position: relative;
    width: 100px;
}