如何将文字置于Sitecore中的图像上？

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