html - 仅使用 CSS 标题后的背景图像(图案)

Question

是否可以使用 CSS 创建以下效果。我在 HTML 中只有一个 H2 元素，我对页面的 HTML 没有任何控制。我只能更改 CSS。

我用 :before 和 :after 尝试过，但到目前为止没有成功。

这将用于 CMS，因此我无法确定最终用户将如何或在何处添加标题。

Answer 1

我认为你最好的办法是(因为你不能编辑任何 HTML 并且你想要一个纯 CSS 的解决方案)对容器的位置和 z-index 以及 h2:after 伪元素进行一些调整:

HTML:

<div id="wrapper">
    <h2 class="heading">New Collection </h2>
</div>

CSS:

#wrapper {
    width:100%;
    height:800px;
    background:green;
    position:relative;
    z-index:-2;
}
.heading {
    display:inline;
    background:green;
}
.heading:after {
    content:'';
    display:inline-block;
    width:100%;
    height:20px;
    background:#d3d3d3;
    position:absolute;
    right:0;
    z-index:-1;
}

检查这个 FIDDLE ，我知道这不是那么花哨，但我认为你不能只使用 CSS 做更多的事情。

希望这对您有所帮助。