0

私は自分の e コマース システムに使用しているカテゴリ モデルを持っています。カテゴリごとに固定の背景画像を追加しました。達成したいのは、追加したカテゴリごとに異なる背景画像をプログラムで追加することです。以下はコードです。現在、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%;
}

提案や代替案は高く評価されます.カテゴリアイテムごとに異なる背景画像を追加するだけです.現在、背景画像はデータリストで使用されるカテゴリアイテムクラスに固定されています.

4

3 に答える 3

3

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-22T21:32:41.047 に答える
0

複数のCSSクラスを使用します。1つは一般的な背景画像スタイル用で、次に、特定の背景画像スタイルが正しい画像参照で設定されているカテゴリごとに個別のクラスを使用します。

このようなもの：

@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がわからない場合はstyle、値が.の属性を使用しますbackground-image:url(@item.BackgroundImage)。

于 2011-10-24T14:31:31.743 に答える