Question

我正在尝试为我的论坛设计一个布局，在div或桌面上有2个背景图片。看完这个论坛的设计后，我明白了这个想法（http://s4.zetaboards.com/APTSecretServices/index/）如果你看到标有“类别”的主要类别，它包含2个背景图片。从探索CSS（http://s4.zetaboards.com/c/35079/404/css.css）开始，我发现它被标记为h2left和h2right。

代码：

.h2left {
background: url(http://z4.ifrm.com/30294/164/0/p1083155/h2left.png) no-repeat;
}

.h2right {
background: url(http://z4.ifrm.com/30294/164/0/p1083156/h2right.png) no-repeat right
top;
height: 40px;
}

看到这个之后我意识到他们使用了h2，然后在论坛上他们将它们全部组合在一起它似乎是由这段代码完成的

        <table class="cat_head"><tr><td>
        <h2>

            Category
        </h2>
        </td></tr></table>

考虑到我们找不到他们如何将两者结合起来的证据，这是非常令人困惑的。

Answer 1

如果你不必支持IE＆lt; 8，那么干净的解决方案是使用伪选择器：before和：after。它们确实包含了释放的力量！

检查浏览器支持：http://caniuse.com/css-gencontent 在IE6的情况下，IE7用户只获得在“真实”DOM元素上声明的背景。

请记住，伪元素：before和：after不能用于空元素（如图像） - 因为在第一个（：before）和last（：after）节点之前有“注入”元素。请记住，您必须在其中包含'content'声明：after和：before以显示声明的样式。

在更复杂的布局上，你可以通过使用“position：absolute”和“z-index”获得非常好的效果（1.stacking context将防止图层通过复杂的布局重叠，2。用于IE8 z-index的伪元素不起作用，因此图层的显示顺序与DOM中呈现的顺序相同

有关伪元素的更多信息很好解释： http://www.hongkiat.com/blog/pseudo-element-before-after/

所以，结论：

<tr>
  <td>
    <h2 class="table-header">Some text</h2>
  </td>
</tr>


.table-header {
  /* EDITED: didn't put position on affected element, first that makes the coordinates of :after elements to be calculated from the right element. Sorry! */
  position: relative;

  /* if element is h2 than we got already "display: block" => width: 100%, height:auto */
  font-size:1.5em;
  line-height:2.5em; /* that centers the text if it is only one line long. For multi-lined text that method is not reasonable. I took arbitrary height bigger than font-size */
  background: url(img-main.jpg);
}

.table-header:after {
  content: '';
  position: absolute;
  top:0; right: 0; bottom: 0; left:0;
  background: url(img-additional.jpg);
  background-repeat: no-repeat;
  background-position: center right; 
}

希望有所帮助

Answer 2

该网站上的标记为

<div class="h2wrap">
<div class="h2left">
<div class="h2right">
<div class="h2center">
</div>
</div>
</div>
</div>

所以它是div中的div

Answer 3

您可以将此css用于多个背景图像

#bg_table {
     background: url(http://z4.ifrm.com/30294/164/0/p1083155/h2left.png), url(http://z4.ifrm.com/30294/164/0/p1083156/h2right.png);
     background-position: left center, right center;
     background-repeat: no-repeat;
}

来源：http://www.css3.info/preview/multiple-backgrounds/

一个div / table中有2个背景图像？

3 个答案: