안녕하세요! 나는 내 웹 사이트를 설정하는 과정에 있으며 배경 이미지 (또는 이미지)를 콘텐츠에 따라 크기를 다시 조정할 수있는 방법을 찾으려고합니다.내용에 맞게 배경 크기를 조정 하시겠습니까?
내 배경은 4 개의 모서리와 4 개의 모서리 그리고 중간에 채우기로 구성됩니다. 크기를 재조정 할 수 있습니까? 어떻게 사용하고 싶은지의 예 :
내 배경 이미지는 현재 약 4 단락을 지원하고 맨 아래쪽에 있습니다. 내가 7-8 단락을 원한다면? 수동으로 이미지를 리메이크해야만 더 길 수 있습니까? 아니면 왼쪽 가장자리, 오른쪽 가장자리, 아래쪽 모서리 및 아래쪽 가장자리 사진을 찍을 수 있습니까? 나는 그것이 정말로 의미가 있기를 바랍니다.
해상도가 떨어지고 끔찍 해 보입니다. 이미지를 늘리지 않으려 고합니다.
감사합니다.
모서리와 가장자리를 개별 이미지로 만듭니다. 상단/하단 가장자리는 수평으로 tileable 가능해야합니다; 왼쪽/오른쪽 가장자리를 수직으로.
그런 다음 다른 방법으로 바둑판 식으로 배열되거나 배율이 조정되는 "중간"이미지를 배경으로 사용하십시오. This answer이 도움이됩니다.
css3 속성을 사용하여이 작업을 수행 할 수 있습니다. 아직 모든 브라우저에서이를 지원하지는 않습니다!
.foo {
background-image: url(bg-image.png);
-moz-background-size: 100% 100%; /* Gecko 1.9.2 (Firefox 3.6) */
-o-background-size: 100% 100%; /* Opera 9.5 */
-webkit-background-size: 100% 100%; /* Safari 3.0, Chrome */
background-size: 100% 100%; /* Gecko 2.0 (Firefox 4.0) and other CSS3-compliant browsers */
-moz-border-image: url(bg-image.png) 0; /* Gecko 1.9.1 (Firefox 3.5) */
}