html - 一个 div/table 中有 2 个背景图片？

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<8，那么干净的解决方案是使用伪选择器 :before 和 :after。它们确实蕴含着释放的力量!

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

请记住，伪元素 :before 和 :after 不能用于空元素(如图像)——因为在第一个 (:before) 和最后一个 (:after) 节点之前“注入(inject)”到元素中。请记住，您还必须在 :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; 
}

希望对你有帮助