Могу ли я установить два фоновых изображения для одного элемента с помощью CSS?

Question

Пример HTML-кода:

<table>
<tr>
 <td class="a b">

Пример CSS-файла:

.a
{
  background-image:url(a.png);
}

.b
{
  background-image:url(b.png);
}

Кажется, что часть "b" игнорируется.

Есть ли способ включить оба изображения в одну ячейку, даже используя другую технику?

Answer 1

Теперь вы можете делать с CSS3. http://www.zenelements.com/blog/css3-background-images/

#my_CSS3_id {
background: url(image_1.extention) top left no-repeat,
url(image_2.extention) bottom left no-repeat,
url(image_3.extention) bottom right no-repeat;
}

Answer 2

Вы можете сделать это:

<td class="a"><div class="b">...</div></td>

Тогда у td будет первый фон, а у div внутри будет второй. Если один прозрачный, другой просвечивает. Я думаю, что b.png будет на вершине, но я не уверен в этом.

Answer 3

Это интригующая идея, но подумайте о том, как работают другие свойства, например, цвет.

.a { color: red; }
.b { color: blue; }

Как текст может быть красным и синим ? В этом случае синий выигрывает тай-брейк, потому что это указано позже.

Может быть и другой способ, если вы можете создать изображение ab.png, которое является результатом объединения a.png и b.png.

.a { background-image(a.png) }
.b { background-image(b.png) }
.a.b { background-image(ab.png) }

Предупреждение: он не работает в IE6.

Answer 4

что-то вроде этого может работать:

<table>
<tr>
  <td class="a">
    <div class="b">

и css:

.a
{
  background: url(a.png) top left no-repeat;
}

.b
{
  background: url(b.png) top right no-repeat;
}

установите div достаточно широко, и вы увидите одно изображение, плавающее в верхнем левом углу, а другое - в верхнем правом

Answer 5

Нет, каждое объявление background-image заменит / переопределит предыдущее для данного элемента. Вам нужно будет вложить элемент для каждого дополнительного фона, который вы хотите применить. Если вы пытаетесь применить необычную границу к элементу, в CSS3 есть несколько новых свойств границ, но они не поддерживаются широко.

Answer 6

Вы не можете иметь оба изображения в качестве изображения bg для ячейки. Вам нужно сделать 2 ячейки или поместить изображения в виде <img ... /> тегов внутри ячейки. Также некоторые браузеры имеют проблемы с чтением определений классов class = "a b c".