我试图通过在视觉上创建一个变量来为 div 提供背景图像。
我正在仔细阅读一个属性，当我将它提供给样式标签时，它不起作用。
这是html
<sly data-sly-test.fileReference="${properties.title}" />
<div style="background: url(${fileReference}); background-position: center top;">
<p>${properties.title}</p>
呈现页面时，这就是我所看到的
<div style="background: url(); background-position: center top;">
<p>my Title</p></div>
这意味着标签${properties.title}内部<p>被接受，但它不适用于内部样式元素。
变量解决得很好。您的url()值为空的原因是您没有使用正确的Display Context。此外，您传递的值 string"my Title"不是有效的 URL（您需要打印的内容）或有效的样式标记（通常在style属性中呈现的内容）
您会注意到以下每个表达式都呈现一个空url()值：
<div style="background: url(${'cookies'});"></div>
<div style="background: url(${'cookies with chocolate chips'});"></div>
<!--/* both print background: url();*/-->
如果我们强制显示上下文允许任何字符串，则将打印该值
<div style="background: url(${'cookies' @ context='unsafe'});">
</div>
<!--/* prints background: url(cookies);*/-->
在script和style上下文中，HTL要求显式声明显示上下文。如果不是，则不会渲染输出。
您要输出以显示背景图像的是图像的 URL。让我们尝试明确这一点：
<div style="background: url('${'/etc/designs/myapp/img/someimage.png' @ context='uri'}');">
</div>
<!--/* prints background: url('/etc/designs/myapp/img/someimage.png');*/-->
在那里，这就是诀窍！
现在，作为一个建议，尽量避免内联样式。如果它是客户端库的一部分，您将避免与显示上下文类似的问题，并且您的 CSS 将更易于维护。
这对我有用---添加 @ context='styleToken'
<sly data-sly-test.fileReference="${properties.title}" />
<div style="background: url(${fileReference @ context='styleToken'}); background-position: center top;">
<p>${properties.title}</p>