使用Razor为每个类别添加不同背景图像

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

@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的类别-Item

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

任何建议或替代方案将不胜感激，我只需要添加不同的背景图片为每个类别的项目，目前的背景图像被固定在datalist使用的category-item类中。

来源

2011-10-22 Mr A

我只想用多个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]到同一类的声明？您还可以使用更多的东西像语义如果你已经有了一个类别名称，等等，那么你可以在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%; 
}

还有一些其他的替代品为好，特别是如果你不这样做知道图像的网址，直到循环执行...在这种情况下，我只会使用style属性的值为background-image:url(@item.BackgroundImage)。

来源

2011-10-24 14:31:31 samandmoore

如果在视图中有样式表定义，而不是在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(); 
}

来源

2011-10-22 21:32:41 dknaack

使用samandmoore的回答，你也可以（用@ Request.RawUrl）这样做完全在视图中，基于请求的URL图像的来源：

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

来源

2017-07-27 15:50:55

使用Razor为每个类别添加不同背景图像

回答

相关问题