Я могу установить два фоновых изображения на том же элементе с CSS?
Я не уверен, как выглядят ваши данные, но что-то вроде приведенного ниже, как правило, то, что вы ищете, если у вас есть столбец, в котором есть счет каждого пола:
sum(CASE WHEN gender='male' THEN YOUR_COUNT_METRIC END)/sum(YOUR_COUNT_METRIC)
Или если вы у вас нет метрического столбца и строки на человека, тогда:
sum(CASE WHEN gender='male' THEN 1 ELSE 0 END)/count(gender)
Если это не так, пожалуйста, опубликуйте некоторые примеры данных, чтобы помочь
6 ответов
Вы можете сделать это:
<td class="a"><div class="b">...</div></td>
Тогда td будет иметь первый фон, а внутри div будет второй. Если один прозрачный, другой будет виден. Я думаю, что b.png будет наверху, но я не уверен насчет этого.
Нет, каждое объявление фонового изображения будет заменять / отменять предыдущее для данного элемента. Вам нужно будет вложить элемент для каждого дополнительного фона, который вы хотите применить. Если вы пытаетесь применить причудливую границу к элементу, в CSS3 есть несколько новых свойств границы, но они широко не поддерживаются.
Вы не можете использовать оба изображения в качестве изображения BG для ячейки. Вам нужно сделать 2 ячейки или поместить изображения как теги внутри ячейки. Также у некоторых браузеров есть проблемы с чтением определений классов class = "ab c".
может сработать что-то вроде этого:
<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 достаточно широко, и вы увидите одно изображение, плавающее в верхнем левом углу, а другое в верхнем правом углу.
Это интригующая идея, но подумайте, как работают другие свойства, такие как цвет.
.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) }
Предостережение: это не так
Теперь вы можете использовать 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;
}