动态设置 background-image-url答案

【问题标题】：Dynamically set background-image-url动态设置 background-image-url
【发布时间】：2016-04-09 12:22:26
【问题描述】：

在我的 gwt 应用程序中，我得到了一棵带有一些图像的树。这些图像可以通过拖放复制到面板中。现在我想让它们在这个面板中调整大小。当我使用“背景图像”的具体图像路径测试我的 css 代码时，resize:both 和 background-size:cover 有效！我的问题是，我无法为 css 设置具体的 url，因为图像路径是动态的。当我从 css 中删除背景图像并在我的代码中设置背景图像时，周围的容器会调整大小，但图像不会。是否可以将“背景图像”设置为我在运行时选择的图像？我怎样才能用css解决这个问题？谢谢！！

【问题讨论】：

你能显示一些代码吗？我可以这样说，将background-size 设置为contain 或cover（任何适合您的需求），但这是否有效取决于您已经拥有的。
背景大小不是问题...当我使用“背景图像”的具体图像路径测试我的 css 代码时，它可以工作！但问题是，我无法为 css 设置具体的 url，因为图像路径是动态的...... :(

标签： css gwt background-image

【解决方案1】：

您可以随时在代码中设置背景图片。例如：

myPanel.getElement().getStyle().setBackgroundImage("url(/myImage.jpg)");

要使其可调整大小，您需要将the correct CSS 应用于此面板。有几个 CSS 选项可供您考虑。

【讨论】：

当我使用“背景图像”的具体图像路径测试我的 css 代码时，调整大小有效！但问题是，我无法为 css 设置具体的 url，因为图像路径是动态的...... :(我如何在 css 中解决这个问题？
你不能在 CSS 中做到这一点。你需要使用我提供的代码来设置路径，当你知道它时。
好的，但是如何设置 url 动态？ >myPanel.getElement().getStyle().setBackgroundImage("url(?)");
我不明白你的问题。只需替换“？”使用您尝试设置的 URL。当你得到一个新的时，用新的 URL 再次调用这行代码。等等。
让我试着更好地解释我的问题:) 在滚动面板中，我得到了一棵带有一些图像小部件的树。当这些小部件之一被拖放到其目标=（绝对面板）时，原始小部件将被小部件副本替换。在目标中，放置的小部件应可调整大小。当我使用 resize-property 添加 css 时，会显示角落中的 resize-symbol。我可以拉它，但小部件没有调整大小，只是围绕小部件的“边框”。