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文件夹中，该怎么办？在那种情况下，网址将如何。将＆lt; =％request.getContextPath＆gt;在这里工作????

Answer 1

@nikunj;您可以在background-image标记中使用h2，如下所示

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

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

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

如果您想为不同的标签添加单独的图片，请为您的background images提供不同的课程，如下所示： http://jsfiddle.net/sandeep/NqXhB/4/

Answer 2

你需要使用css的背景图片属性..这是一个让你入门的链接：http://w3.org/TR/CSS2/colors.html#background

，特别是你的问题：

<h2 class="image">My photo album</h2>

您的样式表如下：

 .image{ width: 300px; height: 75px; background-image: url(header.gif); background-repeat: no-repeat; }

按W3标准：

Partial URLs are interpreted relative to the source of the style sheet, not relative to the document

因此，如果您的CSS位于内容文件夹中并且您需要转到图像文件夹..您可以使用以下内容：url（“../ images / header.png”）

Answer 3

你把图像放在这个

<h2><img src='image/email.jpg' />Email</h2>

将WebContent文件夹中的图像放在HTML中的H2标记中

3 个答案: