Question

我的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循环的每次迭代中更改图像名称吗？

Answer 1

问题似乎出在您的网址上，因为您将变量作为原始字符串传递，因此该网址实际上是url（〜/ Content / images / @（itm.Company）.jpeg ），而不是您的itm.Company的值。为此，您必须在以下代码行中使用一些内容：

...url(~/Content/images/"+@itm.Company+".jpeg);"

这样itm.Company被解释为C＃代码。

当图像名称可以变化时，如何设置具有50％不透明度的div元素背景图像

1 个答案: