2

I am using gwt for showing a dynamic image inside a td and the image is coming from a imagebundle but its showing the whole big image, which gwt makes during compilation, inside that td rather than showing specific part from that big image. I don't know what I am missing here... The problem is the image will be added and selected dynamically and I can't define a css everytime I add an image. If anyone of you can help me regarding it. Here is my code

My table cell is defined inside the UiBinder something like....

    <ui:style>
          .colourPickerCell {
             background-repeat:no-repeat;
          }
    </ui:style>

         <tr>
            <td class="{style.colourPickerCell}" ui:field="colourPreviewSlot" rowspan="3" width="50%"></td>
        </tr>

Function inside the presenter class:

    public void newColorSelected(Image patternImage) { 
            Style patternImageStyle = patternImage.getElement().getStyle();
            Style style = getColourPreviewSlot().getStyle();
            style.setWidth(patternImage.getWidth(), Unit.PX);
            style.setBackgroundImage(patternImageStyle.getBackgroundImage());
            style.setLeft(-patternImage.getOriginLeft(), Unit.PX);
            style.setTop(-patternImage.getOriginTop(), Unit.PX);
            style.setHeight(patternImage.getHeight(), Unit.PX);

        }

When I debug my code I get the html for patternImage object as:

            <img id="..." style="backgrond:url(....) no-repeat -149px 12px;"/>

Best regards,

4

1 回答 1

1

如果您将此图像用作背景精灵，它认为您必须使用background-position css 属性将图像“移动”到 td“后面”。

“left”和“top”属性与您设置样式的元素相关，而不是其底层背景图像。

于 2012-07-10T10:28:19.417 回答