css - ASP.NET MVC 4 - Sprites：来自模型的背景位置

Question

我有一组 96x96 像素的图片。因此，我决定将它们组合在一张图像中，并将有关边距的信息存储在数据库中。如何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>