Question

我正在使用gwt项目。其中我有不同类型的标签

问题
答案
auther

所有标签都有共同的css如下

labelCss  {
          background: url("images/img1.png") no-repeat scroll 1px 
                50% transparent;

          background-color: #F2F6F9;
          font-size: 13px;
          margin: 7px 2px 4px 1px;
          padding-bottom: 3px;
          padding-left: 8px;
          padding-top: 6px
          }

我想将图片更改为标签更改的类型。是否可以使用单个css属性。或者我做错了什么。

如果有人知道请回复

提前致谢

Answer 1

您可以使用.label进行常规样式设置，但是您需要为每种类型的标签设置一个特殊类，您可以在其中指定要呈现的图像。小例子：

#inicio li {
  display: block;
  width: 177px;
  height: 76px;
  margin: 8px 8px 8px 0;
  float: left
}
#inicio #ini1 {
  background: url(/imgs/Inicio1.jpg);
}
#inicio #ini2 {
  background: url(/imgs/Inicio2.jpg);
}
#inicio #ini3 {
  background: url(/imgs/Inicio3.jpg);
}

Answer 2

要么有多个CSS类，要么使用JS来切换图像。

例如：

.generalLabel
      {
      background-color: #F2F6F9;
      font-size: 13px;
      margin: 7px 2px 4px 1px;
      padding-bottom: 3px;
      padding-left: 8px;
      padding-top: 6px
      }

.label1
      {
      background: url("images/img1.png") no-repeat scroll 1px 
            50% transparent;
      }


.label2
      {
      background: url("images/img2.png") no-repeat scroll 1px 
            50% transparent;
      }

然后，您可以对要设置样式的元素使用class="generalLabel label1"或class="generalLabel label2"。

另一种选择是使用JS并根据类型更改图像URL，但我不建议这样做，除非有一个非常具体的原因（我想不出一个）不仅仅使用CSS。

通过gwt项目中的css将图像设置为标签

2 个答案: