HTML_HTML/Xhtml_Web 페이지 제작 시 background-image 속성 설정에 대한 자세한 설명

사진이라고 하면 가장 먼저 떠오르는 것이 바로 배경사진입니다. 많은 장식이 배경 그림을 사용하여 구현되기 때문입니다. 이 경우 CSS로 배경 이미지를 제어하는 ​​것부터 시작해 보겠습니다.

정의 및 사용법

배경 이미지 속성은 요소의 배경 이미지를 설정합니다.

요소의 배경은 패딩과 테두리를 포함하여 요소의 전체 크기를 차지하지만 여백은 차지하지 않습니다.

기본적으로 배경 이미지는 요소의 왼쪽 상단에 배치되며 가로, 세로로 반복됩니다.

1. CSS 컨트롤 배경 이미지:

웹 페이지의 경우 디자인을 시작할 때 배경 이미지가 무엇인지에 대해 크게 생각하지 않을 수도 있습니다. 대부분 배경 색상과 관련되어 있기 때문에 그 이유는 매우 간단하다고 생각합니다. 음악과 마찬가지로 웹 페이지를 여는 속도에 일정한 영향을 미칩니다. 하지만 일반적인 개인 홈페이지나 개인 블로그의 경우 자신의 개성을 표현하기 위해서는 당연히 빼놓을 수 없는 부분입니다. 물론, 이미지가 없을 때와 나쁠 때가 있습니다. , 대체 콘텐츠가 표시되지 않으므로 탐색 버튼 텍스트 또는 유사한 상황에 CSS 배경 이미지를 사용하지 않는 것이 좋습니다.
배경 이미지를 제어하기 위한 CSS 속성은 이미지와 관련이 있는 한 대부분 사용됩니다.

(1) 배경 이미지 가져오기:

물론 가장 친숙한 것은 배경과 배경 이미지입니다.
웹 페이지의 배경 이미지를 디자인하는 코드는 다음과 같습니다.

본문 {배경:url("d:이미지

또는

body {배경-이미지:url("d:이미지

(2) 배경 이미지 표시 방법:

물론 위의 코드만으로는 원하는 효과를 표현할 수 없습니다. 그림이 작으면 타일로 표시되기 때문에 크면 표시하기 위해 스크롤 막대가 나타나서 좋지 않습니다. 따라서 더 많은 디스플레이 제어를 수행해야 합니다. 즉, 배경 반복을 사용해야 합니다. 값은 다음과 같습니다.

반복: 기본값입니다. 배경 이미지가 수직 및 수평으로 모두 타일링됩니다

no-repeat: 배경 이미지가 타일링되지 않습니다

repeat-x: 배경 이미지가 수평으로만 타일링됩니다

repeat-y: 배경 이미지가 수직으로만 타일링됩니다

코드에 대해서는 CSS를 조금 아시는 분이라면 다음과 같이 아실 것이라 생각합니다.
:

body {Background:url("d:images

(3), 배경 이미지 크기 조절 :

그런데 문제는 이미지가 너무 크면 어쩌지? 좋은 웹페이지를 위해서는 위에서 언급한 이유로 너무 큰 사진을 사용하지 않는 것이 가장 좋습니다. 이는 웹페이지를 여는 속도에 영향을 미치기 때문입니다. PS나 FireWorks를 사용하여 처리하는 것이 좋습니다. 하지만 제가 언급한 이후로 우리는 이미지 크기를 제어하기 위해 CSS를 사용하고 싶지 않습니다.

많은 분들이 자연스럽게 다음 코드를 사용하게 되리라 생각합니다.

코드 복사

코드는 다음과 같습니다.