Фоновое изображение заголовка таблицы, расположенное вертикально
У меня есть градиентное изображение в качестве фона для заголовка таблицы (9x18 пикселей). Это изображение вызывается через класс селектора. Когда содержимое заголовка увеличивается до 2 строк (увеличивается вертикальная высота), изображение bg разбивается вертикально и выглядит некрасиво. Как я могу растянуть изображение bg по вертикали без мозаики?
Ответы 5
Вы не можете растянуть это. Что ж, не обошлось и без неприятных хаков CSS, которые действительно не будут работать во всех доступных браузерах. Я бы не стал их использовать (если ваш HTML-код не нацелен только на один браузер, например, если это страница для внутреннего использования и используемый браузер известен). Однако вы можете заставить его повторяться только в одном направлении. Это то, что вы обычно хотите, имея градиент.
background-repeat: repeat-x;
Вот пример изображения:
Вот HTML-код, который его использует
<html>
<head><title>Gradient Test</title>
<style type = "text/css">
th {
color:brown;
background-image:url(http://img222.imageshack.us/img222/6586/fillhz2.png);
background-repeat:repeat-x;
margin: 0;
}
</style>
</head>
<body>
<table>
<tr>
<th>One line</th>
<th>Three<br>lines<br>of text</th>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
</tr>
</table>
</body>
</html>
Он будет повторяться, но только в одном направлении. Обычно градиент можно смело повторять в одном направлении, растягивать его не нужно.
Прежде всего, я предполагаю, что вы используете CSS для размещения этого фонового изображения. Вероятно, вам нужно уточнить эту часть вашего ответа.
Я не верю, что есть функция css, которую можно использовать для растягивания фонового изображения. Как говорит Меки, вы можете использовать background-repeat для мозаичного изображения по горизонтали, но это не будет иметь дело с расширением заголовка за пределы высоты вашей исходной плитки.
Самый простой способ справиться с этим - просто сделать фон достаточно большим, чтобы уместить пару строк или больше.
Так что, если вы сделаете фон высотой 40 пикселей или, возможно, немного больше, вы не добавите огромного количества с точки зрения размера файла, но тогда у вас будет более гибкий дизайн.
В целом, что касается макета и графики, всегда лучше добавить немного гибкости, чтобы справиться с несоответствиями браузера и различными потребностями пользователей.
Проблема, с которой вы столкнулись, заключается в том, что ваш фон повторяется, комментарий Меки верен и должен исправить вашу проблему, фоновые изображения будут всегда повторяться, если вы не укажете, каким образом он должен повторяться, если вообще.
Вот ссылка на все различные свойства фона CSS, которые могут вам немного помочь: http://www.w3schools.com/css/css_background.asp
В качестве альтернативы вы можете установить цвет фона контейнера на тот же цвет, что и последняя строка в градиенте. Таким образом, конец градиентного изображения будет невидимым.
<html>
<head><title>Gradient Test</title>
<style type = "text/css">
th {
color:brown;
background-image:url(http://img222.imageshack.us/img222/6586/fillhz2.png);
background-repeat:repeat;
margin: 0;
}
</style>
</head>
<body>
<table>
<tr>
<th>One line</th>
<th>Three<br>lines<br>of text</th>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
</tr>
</table>
</body>
</html>