使用 Razor 为添加到模型中的每个类别添加不同的背景图像

Question

我有一个类别模型，我将其用于我的电子商务系统，我为添加的每个类别都有一个固定的背景图像，我想要实现的是以编程方式为添加的每个类别添加不同的背景图像。下面是代码，目前我正在通过CSS添加图像。

@using Nop.Web.Models.Catalog;
@if (Model.Count > 0)
{
<div class="home-page-category-grid">
    @(Html.DataList<CategoryModel>(Model, 5,
            @<div class="item-box">
                <div class="category-item"> @*Thats where i am adding background-images in the class category-item*@
                    <h2 class="title">
                        <a href="@Url.RouteUrl("Category", new { categoryId = item.Id, SeName = item.SeName })" title="@item.PictureModel.Title">
                            @item.Name</a>
                    </h2>
                    <div class="picture">
                        <a href="@Url.RouteUrl("Category", new { categoryId = item.Id, SeName = item.SeName })" title="@item.PictureModel.Title">
                            <img style="border-width: 0px;" alt="@item.PictureModel.AlternateText" src="@item.PictureModel.ImageUrl"
                                title="@item.PictureModel.Title" /></a>
                    </div>
                </div>
            </div>
        ))
</div>
<div class="home-page-category-grid-separator"></div>

任何

类别项目的CSS

.home-page-category-grid .category-item
{
text-align: center;
margin: 10px 0px 35px 4px; /*width: 150px;*/
width: 166px; 
height: 185px; 
background: url('images/picture-bg.png') no-repeat 0 100%;
}

建议或替代方案将受到高度赞赏，我只需要为每个类别项目添加不同的背景图像，目前背景图像固定在数据列表使用的类别项目类中。

Answer 1

如果您的视图中有样式表定义，而不是在 css 文件中，则可以执行此操作。 CSS 文件基本上是像 html 一样的静态文件。如果你想获得一些动态的东西，你必须在服务器端代码中完成。也许我说的话令人困惑..但是检查我的样本，你就会明白我的意思....我希望;)

// Your View
<style>
    body 
    {
        background-image: url('@ViewBag.ImagePath');
    }
</style>

// your action method
public ActionResult ActionName()
{
   ViewBag.ImagePath = "<path to your image">
   return View();
}

Answer 2

我只会使用多个 CSS 类，一个用于一般背景图像样式，然后一个用于每个类别的单独一个，该类别仅具有带有正确图像引用的特定背景图像样式集。

像这样的内容：

@using Nop.Web.Models.Catalog;
@if (Model.Count > 0)
{
<div class="home-page-category-grid">
    @(Html.DataList<CategoryModel>(Model, 5,
            @<div class="item-box">
                <div class="category-item [email protected]"> @*Thats where i am adding background-images in the class category-item*@
                    <h2 class="title">
                        <a href="@Url.RouteUrl("Category", new { categoryId = item.Id, SeName = item.SeName })" title="@item.PictureModel.Title">
                            @item.Name</a>
                    </h2>
                    <div class="picture">
                        <a href="@Url.RouteUrl("Category", new { categoryId = item.Id, SeName = item.SeName })" title="@item.PictureModel.Title">
                            <img style="border-width: 0px;" alt="@item.PictureModel.AlternateText" src="@item.PictureModel.ImageUrl"
                                title="@item.PictureModel.Title" /></a>
                    </div>
                </div>
            </div>
        ))
</div>
<div class="home-page-category-grid-separator"></div>

看看我如何添加 [email protected]< /code> 到同一个类声明？您还可以使用更语义化的内容，例如类别名称（如果有的话）等。然后您可以在 CSS 中执行此操作：

.home-page-category-grid .category-item
{
    text-align: center;
    margin: 10px 0px 35px 4px; /*width: 150px;*/
    width: 166px; 
    height: 185px;
}

.home-page-category-grid .category-item .category-1
{
    background: url('images/picture-bg-1.png') no-repeat 0 100%;
}

.home-page-category-grid .category-item .category-2
{
    background: url('images/picture-bg-2.png') no-repeat 0 100%;
}

还有其他一些替代方案，特别是如果您在循环之前不知道图像 url执行...在这种情况下，我只需使用值为 background-image:url(@item.BackgroundImage) 的 style 属性。

Answer 3

使用 samandmoore 的答案，您还可以完全在视图中执行此操作，并根据请求的 URL（使用 @Request.RawUrl）使用图像源：

<div class="parallax [email protected]('/', '-')" >
  <section class="page-title">
    <div class="container">
      <h2>@Html.Raw(ViewBag.Title)</h2>
    </div>
  </section>
</div>