set image to label through css in gwt project
I am using gwt project. In which I have different type of label
- question
- answer
- 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.
精彩评论