1

我有这个网站的一部分，我想要看起来像这样的 H3...

------------------- 居中文本 -------------------

其中“---”部分是花哨的摇摆背景图像。左边和右边是彼此的反映。

所以一种选择是...

<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等？

4

2 回答 2

1

您可以使用伪元素，:before并且:after：

h3 {
   text-align: center;
}

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

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

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

编辑：这是一个例子。

于 2013-01-10T21:27:47.153 回答
0

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

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>
于 2013-01-11T00:20:01.530 回答