2013-02-02 1 views
2

사진 컬렉션이 96x96 픽셀입니다. 그래서 저는 그것들을 하나의 이미지에 결합하고 데이터베이스의 여백에 관한 정보를 저장하기로 결정했습니다. 모델의 데이터에 따라 background-poisiton을 어떻게 설정할 수 있습니까?
아니면 더 나은 방법이 있습니까?ASP.NET MVC 4 - 스프라이트 : 모델의 배경 위치

+0

모델에있는 어떤 데이터를 사용하고 있습니까? 알지 못하면이 사실에 대답 할 실제 방법이 없습니다. –

+0

예를 들어 스프라이트에 마진을 나타내는 숫자를 포함하는'ImagePosition' 필드가 있다면 'backroung-position'에서 어떻게 설정합니까? – ChruS

답변

2

ImagePosition이라는 모델에 1 개의 값만있는 경우 (위쪽? 왼쪽? 오른쪽?) 다음과 같이 할 수 있습니다.

<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>