html - 将位于 WebContent 文件夹中的图像放置在 HTML 中的 H2 标签中

Question

我正在创建标签式部分，标签标题为 H2，如下所示:

<div class="mainTab">
   <div class="myTab">
      <h2>Tab1</h2>
             Tab1 content here
   </div>
    <div class="mtTab">
       <h2>Tab2</h2>
             Tab2 content here
    </div>
<div>

我想在选项卡标题前放置一张图片。就像电子邮件选项卡标题之前的电子邮件图像。

这可以通过类似的方式实现:

.h2one {
   font-size: 36px;
   font-weight: bold;
   background: url    ('http://images.findicons.com/files/icons/1676/primo/128/email_open.png') center left no-repeat;
padding-left: 120px;
 }

.h2two {
font-size: 36px;
font-weight: bold;
background: url('http://images.findicons.com/files/icons/1676/primo/128/email_close.png') center left no-repeat;
padding-left: 120px;
}

如果图像在我的服务器的 webcontent 文件夹中怎么办。在那种情况下，网址会是什么样子。 <=%request.getContextPath> 会在这里工作吗？？？？

Answer 1

@nikunj；您可以像这样在 h2 标签中使用 background-image

h2{
 backgrond:url(image.jpg) no-repeat 0 3px;
 padding-left:10px;
}

在上面的例子中我定义了图片background position left:0 & top:3px 但你可以根据你的要求调整你的图片 & 我也给 padding -left 因此，文本移动 10px，您可以看到图像。

您还可以使用 text-indent 代替 padding。

如果你想为不同的标签使用单独的图片，那么为你的背景图片设置不同的类别，如下所示: http://jsfiddle.net/sandeep/NqXhB/4/