使用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爲每個類別添加不同背景圖像

回答

相關問題