CSS - 使用图像以及段落标题的重音线

时间:2010-03-06 03:47:21

标签: html css

一种常见且美观的印刷效果是一个小图像,可能是一个程式化的箭头,一些文字和一条重点线。像这样:

- >现在这个段落---------------------------------

“ - >”的位置是某种小图形,“-------”是一条重点线,可能是彩色的。

我想在css中执行此操作,因此在内容管理系统中,作者只需将行标记为“h3”,样式定义将添加图形和重音行。

我可以使用看起来像这样的CSS css来放入图形:

hd3 { background-image:url(/image/arrow_button.gif); 背景位置:左上角; background-repeat:norepeat; padding-left:55px; }

但我不知道如何添加以下重音线。重音行应在文本后面开始,并继续到页面的右边缘。

1 个答案:

答案 0 :(得分:1)

有几种方法可以做到这一点。最好的解决方案可以

<h3><strong>Words</strong></h3>

使用上面的CSS加上

h3 strong { background-color:#ffffff; padding: 0 5px; } /*if white is the background color you want*/

并使背景图像包含您的箭头和连续的线条,图像与容器的最大宽度一样宽,如果有的话。

通过为h3中的元素声明背景颜色,可以给出图像停止的错觉,以及在另一个图像中拾取的线条。请注意,如果h3可以包装,你必须做一些计算。你可以为此找到一个更复杂的解决方案。

或者你可以内联图片:

<h3>Words <img src=".." alt="" /></h3> 

请注意,这意味着您的演示文稿更直接受到存在的HTML元素的控制,这在某些方面是次优的,但确实很简单并且不是语义噩梦,因为它不会隐藏任何内容。