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

Question

I need to hide the text inside a H1 tag. But not the image. Problem is that i only can change the css and not the html

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

Is there a way to only hide the "Header 1 text" with only css? I'm doing this for big client and they gave me only acces to the css file.

Answer 1

Give a 0px font size

​h1{ font-size:0px }​

Edit: Working sample

Answer 2

Set the image as background of the <h1> , add CSS properties to the <h1> to make it the size of the image and use a negative text-indent on the headline to remove the text. That would be the usual and ideal way to do it if you had access to the html too.

Since you only have access to the CSS, you can use this:

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

Fiddle: http://jsfiddle.net/VGgnD/

Answer 3

You can do this way using 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;
}

If you have access only to CSS, please display: none; the img :

h1 img {display: none;}

Working Fiddle: http://jsfiddle.net/sJ8JD/

Answer 4

Well the only thing that comes to my mind is this:

<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>

Working example:

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

Answer 5

set font-size: 1px !important; and set background color as text color

Answer 6

You can try position:absolute; so the text won't be visible, it will be positioned outside the page. -5000px

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

Example

Answer 7

It could be as simple as setting the font-size to 0px

h1 {
   font-size: 0.1px;
}

http://jsfiddle.net/m5V2A/