我的MVC视图中有一个foreach循环在我的模型中循环,在其中为列表中的每个对象渲染一个单独的div元素。现在,我希望这个对象的背景是50%不透明度的图像。但是,对于循环的迭代,图像并不相同,并且将取决于模型对象的其中一个参数。
为了更清楚,目前我有:
@foreach (var itm in Model)
{
<div id="shell" style="position: relative; etc....">
Many other div elements placed with position: absolute within the shell container.
</div>
}
我的内容文件夹中的图片名称可以在itm.Company + jpeg
找到,我想将其作为div的背景图片opacity: 0.5;
我发现here我不能仅仅将背景图像设置为shell div,因为我不能在不改变整个div的不透明度的情况下改变它的不透明度。
以下答案指出我应该通过包含另一个div来创建它:
HTML
<div class="myDiv">
<div class="bg"></div>
Hi there
</div>
CSS
.myDiv {
position: relative;
z-index: 1;
}
.myDiv .bg {
position: absolute;
z-index: -1;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: url(test.jpg) center center;
opacity: .4;
width: 100%;
height: 100%;
}
我试过了:
@foreach (var itm in Model)
{
<div id="shell" style="z-index: 1; position: relative; etc....">
<div class="companyImage" style="z-index:-1; top: 0; bottom: 0; left: 0; right: 0; background: url(~/Content/images/@(itm.Company).jpeg);">
</div>
Many other div elements placed with position: absolute within the shell container.
</div>
}
但是,我的companyImage div样式表的url()
部分内的剃刀无法正常呈现。我没有得到任何错误,但VS中的突出显示消失了,它什么也没做。
所以有人知道设置div元素背景图像的最佳方法,50%不透明度,考虑到我需要在foreach循环的每次迭代中更改图像名称吗?
答案 0 :(得分:0)
问题似乎出在您的网址上,因为您将变量作为原始字符串传递,因此该网址实际上是url(〜/ Content / images / @(itm.Company).jpeg ) ,而不是您的itm.Company
的值。为此,您必须在以下代码行中使用一些内容:
...url(~/Content/images/"+@itm.Company+".jpeg);"
这样itm.Company
被解释为C#代码。