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

不，背景图像的每个声明都将替换/覆盖给定元素的前一个声明。您需要为要应用的每个其他背景嵌套元素。如果你试图将一个花哨的边框应用于一个元素，CSS3中有一些新的边框属性，但它们并没有被广泛支持。

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

这是一个有趣的想法，但想想其他属性如何工作，例如颜色。

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

文字怎么可以是红色和蓝色？在这种情况下，蓝色赢得决胜局，因为它稍后指定。

如果你可以创建一个由a.png和b.png组合的结果的ab.png，可能还有另一种方法。

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

警告：它在IE6中不起作用。

Answer 6

您不能将这两个图像都作为单元格的bg图像。您需要制作2个单元格或将图像作为<img ... />标记放在单元格内。另外一些浏览器在阅读class =“a b c”类定义时会遇到问题。

我可以使用CSS在同一元素上设置两个背景图像吗？

6 个答案: