开发者

set image to label through css in gwt project

I am using gwt project. In which I have different type of label

  1. question
  2. answer
  3. auther

all of label has common css that is as follows

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
          }

I want to change image as type of label change . Is it possible using single css property. or I am doing something wrong.

If an开发者_开发知识库yone knows please reply

Thanks in advance


You can have a .label for the general styling, but you will need a special class for each type of label, where you specify which image is going to present. Small example:

#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);
}


Either you have multiple CSS classes or you use JS to switch images.

For instance:

.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;
      }

Then you can use class="generalLabel label1" or class="generalLabel label2" on the element that you want to style.

The other option would be to use JS and change the image URL based on the type, but I would not suggest to do that unless there is a very specific reason (and I cannot think of one) for not using CSS only.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜