0

我正在尝试为我的论坛设计一个布局，该布局在 div 或 table 上有 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>

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

4

3 回答 3

1

如果您不必支持 IE<8，那么干净的解决方案是使用伪选择器 :before 和 :after。它们真的包含释放的力量！

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

请记住，伪元素 :before 和 :after 不能用于空元素（如图像） - 因为在第一个 (:before) 和最后一个 (:after) 节点之前有“注入”到元素中。请记住，您还必须在 :after 和 :before 中包含“内容”声明才能显示声明的样式。

在更复杂的布局上，您可以通过使用“位置：绝对”和“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; 
}

希望有帮助

于 2013-06-09T09:05:32.923 回答
0

该网站上的标记是

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

所以它是一个div中的一个div

于 2013-06-09T05:11:24.533 回答
0

您可以将此 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/

于 2013-06-09T05:11:42.283 回答