css 3 изображения в тд

Question

У меня проблемы с добавлением 3 изображений в ячейку таблицы в css, и мне было интересно, может ли кто-нибудь помочь мне выяснить, что я делаю неправильно.Вот что у меня есть:

css

.Example {
        background-image:url("image1.gif"),url("image2.gif"),url("image3.gif");
    background-position: top left, top center, top right;
    background-repeat: no-repeat, repeat-x, no-repeat;
}

html

<td class="Example">
    <a href="example">Example</a>
</td>

Однако, когда я открываю страницу, все, что я получаю, это ячейка, которая говорит Пример безизображение на заднем плане.Есть предложения?

Answer 1

Попробуйте

.Example {
background-image:url("image1.gif"),url("image2.gif"),url("image3.gif");
background-position: top left, top center, top right;
background-repeat: no-repeat;
}

без трех параметров повторения фона.

И имейте в виду, что это работает не во всех браузерах.

Я предлагаю вам использовать старый способ решения этой проблемы. Поместите ссылку на каждое изображение с таким же href.

Answer 2

Наличие нескольких фоновых изображений в одном элементе и текущие ограничения были даны ответы здесь: Layers-изображения-в-CSS-возможно-положить-2-изображения-в-том же элементе , а также здесь: an-i-have-multiple-background-images-using-css

В настоящее время не все браузеры поддерживают эту функцию какуказано в ответах по ссылкам выше.Есть также предложения для обхода, например, использование нескольких Div и помещение каждого изображения в свой собственный div и использование z-порядков для отображения div по мере необходимости.

Answer 3

Единственные браузерные проекты, имеющие этот До сих пор реализована функция WebKit и ХТМЛ (Konqueror). Это попало в Safari 1.3 хоть и работает в OmniWeb 5.5 и выше.

Источник