CSS를 사용하여 사각형을 동적으로 생성하는 방법

Question

CSS를 처음 사용했습니다. (동적 인 숫자로 얼굴을 대체해야하는 일반 이미지)에 번호 (ASP.NET MVC 동작 메소드를 통해 동적으로 생성됨)를 표시해야합니다.

누군가 나를 도와 줄 수 있습니까? CSS를 아는 사람은 잠시 시간이 걸릴 것이라고 확신합니다.

덕분에, 비제이

Answer 1

가장 쉬운 방법은 이미지를 배경 이미지 속성으로 사용하는 <div>을 만드는 것입니다.

.square { 
    /* following are width and height of your background image */ 
    width: 100px; 
    height: 100px; 
    background: url(yourimg.png) no-repeat 0 0; 
} 

당신이 <img> 태그를 사용해야하는 경우, 그것은 A의

HTML

<div class="square"> 
    123 
</div> 

CSS : 그럼 그냥 DIV에 번호를 작성하는 문제 일 것입니다 조금 더 까다 롭지 만 여전히 가능합니다.

HTML

<div class="square"> 
    <span>123</span> 
    <img src="yourimg.png" /> 
</div> 

CSS

.square { 
    /* following are width and height of your background image */ 
    width: 100px; 
    height: 100px; 

    position: relative; 
} 

.square img { 
    position: relative; 
    z-index: 1; 
} 

.square span { 
    position: absolute; 
    z-index: 2; 

    /* Use to position your number */ 
    top: 10px; 
    left: 10px; 
} 

(저급 Z- 색인의 계정) 하단의 <img>와 요소의 스택을 생성하여 상기 작업 및 절대 위치 개수 그 위에. 이것은 숫자의 부모 (<div class="square">)가 상대 좌표를 가지므로 좌표계가됩니다.

Answer 2

당신은 사업부 내에서 컬러 사업부 및 텍스트 (수)를 사용하여이 할 수 있어야한다. 완벽한 사각형을 만들기 위해 CSS를 약간 조정해야 할 수도 있습니다.

<div style="border: 1px solid black; background-color: red; color: white; font-size: 18px; padding: 15px;"> 
    <%: Model.RandomNumber %> 
</div> 

Answer 3

CSS background을 사용하고 번호 뒤에 이미지를 넣으시겠습니까?