면도날을 사용하여 모델에 추가 된 각 카테고리의 다른 배경 이미지 추가

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 클래스를 사용합니다) 올바른 이미지 참조로 설정된 특정 배경 이미지 스타일 만있는 범주 각각에 대한 개별 이미지. 이 같은

뭔가 :

@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 category-@item.Id"> @*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> 

내가 같은 클래스 선언에 category-@item.Id을 추가하는 방법을 참조하십시오? 또한 그런 다음 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) 값을 사용합니다. samandmoore의 답변을 사용

Answer 2

스타일 시트 정의가 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 3

은 또한 (@의 Request.RawUrl 사용) 요청 된 URL에 따라 이미지의 소스, 전체보기에서이 작업을 수행 할 수 있습니다 :

<div class="parallax bg-image-@Request.RawUrl.Replace('/', '-')" > 
    <section class="page-title"> 
    <div class="container"> 
     <h2>@Html.Raw(ViewBag.Title)</h2> 
    </div> 
    </section> 
</div>