그라디언트 색상으로 div를 채우기 위해 고정 된 높이 이미지를 사용하고 있습니다. background : transparent url (green_bg.gif) repeat-x scroll 0 0;CSS 또는 이미지 중 하나를 사용하는 유연한 div의 배경 그라데이션 채우기?
그러나 높이가 이미지 높이와 같을 때만 채워집니다. 이미지를 사용하거나 CSS를 사용하여 텍스트의 양에 따라 높이가 변하는 div의 backround를 채우는 가장 좋은 방법은 무엇입니까?
당신이 찾고있는 것은 div가 배경 이미지 (그라디언트)로 채워진 다음 나머지는 단색으로 채워지는 것입니다.
그렇다면 Photoshop (또는 선택한 이미지 편집기)에서 그라디언트의 마지막 픽셀의 16 진수를 가져옵니다. 논쟁의 여지없이 # FF0000이라고 가정 해 봅시다. 그런 다음이 작업을 수행 :
.myDiv {
background: #FF0000 url(green_bg.gif) repeat-x 0 0;
}
이 #의 FF0000 (빨간색)와 배경을 채울하고 사업부의 상단에서 시작 (x 축) 수평 반복, 그 위에 배경 이미지를 오버레이. 빨간색 배경을 표시하는 방법은 div의 콘텐츠 양을 늘리는 것입니다.
또한 그라디언트의 특정 부분이 항상 표시되도록하려면 CSS에서 padding-top을 늘릴 수 있습니다.
.myDiv {
background: #FF0000 url(green_bg.gif) repeat-x 0 0;
padding-top: 20px;
}
문제가 해결되지 않은 경우 질문에 답하십시오.
배경 SVG라고 말하고 싶습니다. 그러나 afaik 그들은 safari atm에서만 지원됩니다.
또는 어쩌면 웹킷에는 그라디언트를 수행하는 속성이 있습니다. 또는 정말로 필요한 경우 캔버스.
div의 배경을 이미지로 채우고 싶습니까? 당신의 질문을 명확히 해줄 수 있습니까? – Jason