Question

我有一个有背景图像的分区，但它需要是一个可变的大小。我正在使用三张图片。其中一个是顶部，一个是底部，另一个是中间。

我只有一个div可以使用并给出中间背景图像，然后使用前后pesudo类来放置其他图像。主要部门的图像显示在这两个部分后面，因为它们是半透明的。有没有办法围绕这个css或更好的方法来做到这一点？

HHTML：

<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;
}

Answer 1

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

如果您的浏览器支持要求不能使用CSS多个背景，您可以通过设置其他元素（例如h1或p:last内的div来获得相同的结果}。这种方法更复杂，因为你必须非常小心div内元素的位置。

请注意，背景或图像始终会通过其上方图像的透明区域显示。如果你不想要这个，你必须在掩盖图像中加入一些不透明的东西 - 比如你试图淡化的背景颜色。

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

定位：在父类之外的伪类之前和之后

1 个答案: