Question

我需要创建用户控件，其中<sc:text/>元素应显示在<sc:image>上。

我知道这可以通过CSS实现，但在这种情况下无法配置控件，因为我们无法覆盖内联样式。

任何提示？

Answer 1

您可以使用sc:fld扩展功能并在标记中包装sc:text，添加类名或ID（如果必须，还可以添加内联样式）来实现此目的。

<img src="{sc:fld( 'graphic', $sc_currentitem, 'src’ )}" class="head" />
<span class="txt"><sc:text field="txtField" /></span>

然后您可以将这些设置为正常

img.head {}
span.txt {}

Answer 2

我不明白这个问题。这似乎比Sitecore问题更像是前端问题。 CSS会正常工作。这是一个粗略的例子（没有经过测试但是可以让你知道）：

示例HTML：

<div class="my-container">
  <div class="img">
    <sc:image Field="Bar" runat="server" />
  </div>
  <div class="txt">
    <sc:text Field="Foo" runat="server" />
  </div>
</div>

示例CSS：

.my-container {
  position: relative;
}

  .my-container .txt {
    position: absolute;
    z-index: 50;
    top: 0px;
  }

  .my-container .img {
    z-index: 10;
  }

如何将文本放在Sitecore中的图像上？

2 个答案: