포스트 크기에 따라 이미지를 '늘이기'

World of Warcraft forums에는 에뮬레이트하려는 깔끔한 스타일이 있습니다. 나는 그것을 어떻게 해야할지 몰랐다. 그래서 나는 스타일 시트를 파고 그것들의 조각을 집어 넣어 비슷한 스타일을 만드는 법을 배우기로 결정했다.포스트 크기에 따라 이미지를 '늘이기'

스타일 시트를 파헤 칠 때 this 이미지를 발견했습니다. 보시다시피, 포럼 게시물의 배경이지만 고정 크기입니다. 여기 내 질문이 있습니다 - 사용자의 게시물이 그림보다 훨씬 길면 동적으로 더 많은 길이를 만드는 방법은 무엇입니까?

테스트 웹 사이트에서 나는 그 섹션에서 사용한 CSS와 동일한 CSS를 사용했습니다. 그들은 오버플로에 설정했습니다 : 숨겨진; 그래서 그것은 이미지를 계속 배가하지 않습니다. 당연히 코드의 일부를 복사하면 test website에이 난장판이 생깁니다.

크기가 작은 게시물에 대해서는 올바르게 잘라야하기 때문에 올바르게 작동하지만, 매우 얇은 (너비가 1 픽셀로 설정되었을 가능성이 높음) 것으로 가정하고 있습니다. 포럼 게시물의 크기

아무도 내가이 작업을 수행하는 방법을 알고 있습니까?

P. 당연히 나는 그들의 이미지 등을 사용하지 않을 것입니다 - 나는 단지 그것을 복사하는 것만으로 내 자신을 만드는 법을 이해합니다.

출처

2012-06-20 Isaac Askew

뭔가 같은 :

CSS : (이미지와 색상이 그 정말 사용

.post 
{ 
    background:#1A0F08 url(http://us.battle.net/wow/static/images/layout/cms/post_bg.jpg) top no-repeat; 
}

, 그렇지 않은 희망 나를 위해 고소 :))

당신이 찾고있는 것입니다 를 위해. 배경 이미지는 상단에 위치하며 나머지는 컨테이너의 높이와 동일한 배경색을 사용합니다 (그래디언트 사용). 그래서 신장 된 이미지의 단지 환상, 그러나 효과적으로 이미지가 그냥 당신이 사용하고있는 당신 배경색을 변경

출처

2012-06-20 18:41:06

그'#'까다 롭습니다 – Adi

니스! 고맙습니다! –

@AdnanShammout 예, 그건 나를 미치게합니다. 우연히 알고있는가요? lang : css 옵션을 사용하면 이러한 경우에 마크 다운에 행동 방법을 추가 할 수 있습니까? –

게시물의 배경색이 이미지 하단의 색상과 같아 보입니다. 이미지가 크기를 실제로 변경하지는 않습니다.

예 CSS는 다음과 같습니다

#yourPostSelector { 
    background-image: url('path/to/image.jpg'); 
    background-position: top left; /* or 'top center' - whatever works for you */ 
    background-attachment: scroll; 
    background-color: #000000; /* pick the bottom color of your background image */ 
}

출처

2012-06-20 18:39:09 anjunatl

그래, 나도 그렇다. – Adi

그런 경우, 그렇다.하지만 그림의 위쪽과 아래쪽에 테두리를 넣고 싶다면 어떻게해야 할까? (맞춤 테두리는 생성되지 않습니다.) –

"그림"은 배경 이미지 또는 전체 게시물 자체를 의미합니까 (상단의 배경 이미지와 나머지 영역의 색상이 포함되어 있음)? – anjunatl

을 종료 어디 중단이 표시되지 않는 단지입니다 # 00000 *

그것을 당신이 사용하는 배경 이미지의 색상, 기본적으로 하단 부분이 완벽하게 혼합되도록 변경해야합니다.

.body { 
    background: url("../images/post_bg.jpg") no-repeat scroll 50% 0 #1A0F09; 
    clear: both; 
    height: 100%; 
    margin: 0 auto; 
    overflow: hidden; 
    width: 990px; 
}

업데이트이 클래스 당신은 당신이 이해 할 것 여기에 코멘트를 이해하지 않는 경우, 결과를 확인 - : 현재 당신의 현재 이미지에 따라 코드는 다음과 같이 될 것이다.

출처

2012-06-20 18:49:54 Subhajit

포스트 크기에 따라 이미지를 '늘이기'

답변

관련 문제