<h1><img src="heading.png" alt="Some nice heading here"
width="600" height="80"></h1>
Используйте атрибут alt
и установить размеры изображения (в формате HTML или в CSS), чтобы гарантировать, что браузеры могут выделять соответствующее пространство перед тем, как изображение. Вы также можете применить стилизацию CSS к элементу img
, например. шрифт, размер и цвет; в современных браузерах стилизация будет применена к альтернативному тексту, если изображение еще не получено (или когда-либо). Используя вышеприведенный код, вы можете установить стили в элементе h1
.
Altenatively, используйте только (стилизованную) текст для заголовка, но сначала заменить его на изображение с помощью JavaScript:
<h1 style="width: 600px; height: 80px">Some nice heading here</h1>
<script>
new Image('heading.png'); // preloads the image
var h1 = document.getElementsByTagName('h1')[0];
h1.innerHTML = '<img src=heading.png alt="' + h1.innerHTML + '">';
</script>
Как вы определяете размеры изображения? (точка бытия, там часто * не * способ сделать это.) – Michael