-1

我有一个具有背景图像的部门，但它需要是可变大小。我正在使用三个图像。一个顶部，一个底部，一个重复的中间。

我只有一个 div 可以使用，并为其提供了中间背景图像，然后使用 before 和 after pesudo 类来放置其他图像。主分区的图像显示在这两个后面，因为它们是半透明的。有没有办法在css中解决这个问题或更好的方法来做到这一点？

高HTML：

<div class="faq">
  <strong>Q.&nbsp;Who was the greatest business man?</strong><br />
  <p><strong>A.&nbsp;</strong>Noah. He kept his stock afloat, while the rest of the world went into liquidation.</p><br />
  <strong>Q.&nbsp;How should my employees let off steam?</strong><br />
  <p><strong>A.&nbsp;</strong>Take them see to see the comedian Sampson. He'll bring the house down.</p><br />
</div>

CSS - 样式

.faq{
  background: transparent url(../images/image_middle.png) repeat-y center;
  color: #ffffff;
  display: block;
}
.faq:before {
  background: transparent url(../images/image_top.png) no-repeat center top !important;
}
.faq:after {
  background: transparent url(../images/image_bottom.png) no-repeat center bottom !important;
}

CSS - 布局

.faq:before {
    padding-top: 20px;
    display: block;
    content: "\A";
}
.faq:after {
    padding-top: 14px;
    display: block;
    content: "\A";
}
.faq{
    margin: 20px 0 5px !important;
    padding: 0 20px 0 15px !important;
}
4

1 回答 1

1

最好的方法是使用多个背景 - 请参阅https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_multiple_backgrounds。通过这种方式，您可以指定 3 个不同的图像及其位置作为元素的样式。首先列出顶部图像。

如果您的浏览器支持要求不适用于 CSS 多背景，您可以通过设置其他元素的样式来获得相同的结果 - 例如ah1或. 这种方法更复杂，因为您必须非常小心.p:lastdivdiv

请注意，背景或图像将始终通过其上方图像的透明区域显示。如果您不希望这样，则必须在该覆盖图像中添加一些不透明的东西 - 例如您要淡入淡出的背景颜色。

如需更详细的帮助，请发布您正在使用的代码的自包含示例。

于 2012-11-13T18:17:50.243 回答