CSS3에서 배경 디자인하기 - 인형

보는 대부분의 페이지에는 배경이 있습니다. 다음 절차는 CSS3를 사용하여 배경을 추가하는 방법을 보여줍니다.이 배경을 사용하면 웹 페이지가 방문자에게 더욱 매력적으로 보일 수 있습니다.

1. ExternalCSS를 만듭니다. HTML 및 ExternalCSS. CSS 파일을 복사하여 새 폴더에 복사하십시오.

2. JPEG (Joint Photographic Experts Group) 형식으로 배경 이미지를 만들거나 가져 와서 배경 이름을 지정합니다. JPG.

3. ExternalCSS를 엽니 다. CSS.

4. 기존 스타일 뒤에 다음 코드를 입력하고 변경 사항을 디스크에 저장하십시오.

   본문 {background-image: url ("배경.jpg"); background-size: 100 %; background-repeat: no-repeat;}
   

   배경 이미지를 예약하는 가장 일반적인 위치는. 그러나 다른 목적이나 다른 여러 가지 방법으로 배경을 사용하는 것을 방해하는 것은 없습니다.

   배경 크기 속성을 사용하면 이미지가 화면에 나타나는 크기가 결정됩니다. 이 예제는 큰 그림이므로 전체 디스플레이 영역을 차지하려고합니다. 값으로 100 %를 사용하면 이미지가 자동으로 크기 조정되어 전체 클라이언트 영역을 차지합니다.
   background-repeat 속성을 사용하여 이미지가 배경에서 반복되는지 여부를 결정합니다. 작은 이미지가 반복되어 전체 디스플레이 영역을 차지하는 것은 일반적입니다. 큰 이미지를 반복하면 배경이 혼란스럽고 디스플레이의 전체 모양이 손상됩니다.

   테스트 페이지를 다시로드하십시오.

5. 스타일을 변경하면 효과가 나타납니다.

   브라우저 창 크기를 조정하십시오.

   

6. 전체 디스플레이 영역을 차지하기 위해 배경 이미지의 크기가 자동으로 조정되는 것을 볼 수 있습니다.