Фоновое изображение заголовка таблицы расположено вертикально - PullRequest
Новая
       4

Фоновое изображение заголовка таблицы расположено вертикально

1 голос
/ 05 ноября 2008

У меня есть градиентное изображение в качестве фона для заголовка таблицы (9x18pix). Это изображение вызывается через класс селектора. Когда содержимое заголовка увеличивается до 2 строк (увеличивается вертикальная высота), изображение bg располагается вертикально и выглядит некрасиво. Как я могу растянуть изображение BG по вертикали без мозаики?

Ответы [ 5 ]

4 голосов
/ 05 ноября 2008

Вы не можете растянуть это. Ну, не без некоторых неприятных хаков CSS, которые не будут действительно работать во всех доступных браузерах. Я бы не стал их использовать (если только ваш HTML-код не предназначен только для одного браузера, например, если это страница для внутреннего использования и используемый браузер известен) Вы можете повторить это только в одном направлении. Это то, что вы обычно хотите, имея градиент. 

background-repeat: repeat-x;

Вот пример изображения:

alt text

Вот 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>

Это будет повторяться, но только в одном направлении. Обычно градиент можно безопасно повторить в одном направлении, его не нужно растягивать.

1 голос
/ 05 ноября 2008

Проблема, с которой вы столкнулись, заключается в том, что ваш фон повторяется, комментарии Меки верны и должны исправить вашу проблему, фоновые изображения всегда будут повторяться, если вы не укажете, каким образом они должны повторяться, если вообще.

Вот ссылка на все различные свойства фона CSS, которые могут вам немного помочь: http://www.w3schools.com/css/css_background.asp

0 голосов
/ 30 января 2009

Градиентный тест th { коричневый цвет; Фоновое изображение: URL (http://img222.imageshack.us/img222/6586/fillhz2.png); фон-повторить: повторять; поле: 0; } Одна линия Три
строки
текста Данные Данные

0 голосов
/ 05 ноября 2008

Кроме того, вы можете установить цвет фона контейнера на тот же цвет, что и последняя линия в градиенте. Таким образом, конец градиентного изображения будет невидимым.

0 голосов
/ 05 ноября 2008

Прежде всего, я предполагаю, что вы используете CSS для размещения этого фонового изображения. Возможно, вам нужно уточнить эту часть вашего ответа.

Я не верю, что есть функция CSS, которую вы можете использовать, чтобы растянуть фоновое изображение. Как говорит Меки, вы можете использовать background-repeat для мозаичного изображения по горизонтали, но это не относится к заголовку, расширяющемуся за пределы вашей исходной плитки.

Самый простой способ справиться с этим - сделать свой фон достаточно большим, чтобы вместить пару строк или более.

Так что если вы сделаете фон, скажем, высотой 40px или, возможно, немного больше, вы не собираетесь добавлять огромное количество с точки зрения размера файла, но тогда у вас будет более гибкий дизайн.

В целом, когда речь идет о макете и графике, всегда лучше добавить немного гибкости, чтобы справиться с несоответствиями браузера и различными потребностями пользователей.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...