css - ASP.NET MVC 4 - スプライト: モデルからの背景位置

Question

96x96 ピクセルの写真のコレクションがあります。そこで、それらを 1 つの画像にまとめ、余白に関する情報をデータベースに保存することにしました。background-poisitonモデル内のデータに従って設定するにはどうすればよいですか?
または、より良いアプローチがありますか？

Answer 1

マージンを保持するというモデルに値が1つしかない場合ImagePosition（上？左？下？右？）、次のようなことができます。

<span class="picture" style="background-position: @Model.ImagePosition center"></span>

また

<span class="picture" style="background-position: left @Model.ImagePosition"></span>

この場合、クラスpictureはすべての精神情報を保持するために使用されます。

.picture{ 
    background: url([pathtoimage]) no-repeat center center; 
    width: [width]; /* set your width to what you want */
    height: [height]; /* set your height to what you want */
    display: block;
    /* add some padding, margins etc... */
 }

そして、あなたはただ背景の位置を調整しているだけです。

ImagePositionただし、このソリューションでは、が単一の値である場合にのみ、背景の垂直位置または水平位置を調整できます。ただし、ImagePositionがオブジェクトである場合、たとえば垂直方向と水平方向の値を使用する場合は、背景の位置をさらに調整できます。

<span class="picture" style="background-position: @Model.ImagePosition.Horizontal @Model.ImagePosition.Vertial"></span>