Question

我有一个网站的一部分，我希望H3s看起来像这样......

-------------------以文字为中心-------------------

其中“---”部分是花式的wiggley背景图像。左边和右边是彼此的反射。

所以一个选择是......

<h3>
    <div class="left-image-thing"></div>
    <span>Centered Text Here</span>
    <div class="right-image-thing"></div>
</h3>

...并将图像放在跨度的div中。但我想要... ...

<h3>Centered Text Here</h3>

...只需使用css作为左右背景图像。有没有办法做到这一点？只有一个标签，css等？

Answer 1

您可以使用pseudo elements，:before和:after：

h3 {
   text-align: center;
}

h3:before { 
    content: url('myimageurl1.png');
}

h3:after { 
    content: url('myimageurl2.png');
}

当然，你的CSS会更复杂，但这是一种处理你的用例的方法。

编辑：这是an example。

Answer 2

伪元素吓到我了，因为我们需要支持低端浏览器...这将适用于所有地方（甚至是低端）：

CSS：

h3 {
   background: url('myimageurl1.png') no-repeat left middle;
   padding-left: 100px /*This should be the width of myimageurl1.png */
}

h3 span {
   background: url('myimageurl2.png') no-repeat right middle;
   padding-right: 100px /*This should be the width of myimageurl2.png */
}

HTML：

<h3><span>Centered Text Here</span></h3>

如何设计html元素的边？

2 个答案: