Question

我正在使用gwt在td中显示动态图像，图像来自图像捆绑，但它显示整个大图像，gwt在编译期间在td内部，而不是显示该大图像的特定部分。我不知道我在这里缺少什么......问题是图像将被动态添加和选择，每次添加图像时我都无法定义css。如果你们中的任何人可以帮助我。这是我的代码

我的表格单元格在UiBinder中定义类似......

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

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

演示者类中的函数：

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

        }

当我调试我的代码时，我得到了patternImage对象的html：

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

致以最诚挚的问候，

Answer 1

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

“left”和“top”属性相对于您设置样式的元素，而不是其基础背景图像。

GWT背景图像

1 个答案: