Question

我需要隐藏H1标签内的文字。但不是形象。问题是我只能改变css而不是html

<h1>
<img src="img/headerimg.png" width="900" height="125"/>
Header 1 text
</h1>

有没有办法只用css隐藏“标题1文本”？我正在为大客户端做这个，他们只给我访问css文件。

Answer 1

提供0px字体大小

h1{ font-size:0px }

修改：工作sample

Answer 2

将图片设置为<h1>的背景，将CSS属性添加到<h1>以使其与图片大小相同，并在标题上使用否定text-indent来删除文字。如果您也可以访问html，这将是通常和理想的方式。

由于您只能访问CSS，因此可以使用：

h1 {
    font-size: 0.1px; /* 0 gets disregarded by Internet Explorer, 0.1 gets interpreted right by every browser */
}

小提琴：http://jsfiddle.net/VGgnD/

Answer 3

您可以使用CSS执行此操作：

<h1>
    <img src="img/headerimg.png" width="900" height="125"/>
    Header 1 text
</h1>

CSS：

h1 {
    width: 900px;
    height: 125px;
    background: url("img/headerimg.png") no-repeat center center;
    text-indent: -99em;
}

如果您只能访问CSS，请display: none;：img：

h1 img {display: none;}

工作小提琴：http://jsfiddle.net/sJ8JD/

Answer 4

我唯一想到的就是：

<h1 style="color: transparent; font-size: 0px; text-indent: -99em;">
<img src="http://pokit.org/get/img/18d5148ef77ef2a2d5d8193c1c8789e8.jpg" width="900" height="125"/>
Header 1 text
</h1>

工作示例：

http://jsfiddle.net/VRQVs/2/

Answer 5

设置font-size: 1px !important;并将背景颜色设置为文本颜色

Answer 6

您可以尝试position:absolute;，因此文字将不可见，它将位于页面之外。 -5000px

h1 {
  margin-top:-5000px;
  position:absolute;
}
h1 img {
  position:absolute;
  margin-top:5000px;
}

Example

Answer 7

可能就像将font-size设置为0px

一样简单

h1 {
   font-size: 0.1px;
}

http://jsfiddle.net/m5V2A/

隐藏H1标签中的文本但不隐藏图像

7 个答案:

您可以使用CSS执行此操作：

CSS：

工作小提琴：http://jsfiddle.net/sJ8JD/