쉽게 할 바디 배경 이미지

HTML

많은 사이트에서 찾을 수있는 멋진 기능은 중앙 콘텐츠 영역이 그 뒤에 그림자가있는 페이지를 오버레이하는 것처럼 보이는 것입니다. 실제로 하나의 배경 이미지로 블로그를 멋지게 (또는 다른 웹 사이트) 보이게하는 매우 간단한 방법입니다.

어떻게 된거 야?

  1. 콘텐츠의 폭을 파악하십시오. 예 : 750px.
  2. 콘텐츠 영역보다 더 넓은 일러스트레이션 응용 프로그램 (Illustrator 사용)에서 이미지를 만듭니다. 예 : 800px.
  3. 이미지의 배경을 블로그의 양쪽에 원하는 배경으로 설정합니다.
  4. 배경 위에 흰색 영역을 추가합니다.
  5. 영역의 양쪽에서 돌출되는 흰색 영역에 그림자를 적용합니다.
  6. 자르기 영역의 너비를 높이 1 픽셀로 설정합니다. 이렇게하면 빠른 렌더링을 위해 다운로드 할 이미지가 멋지고 압축됩니다.
  7. 이미지를 출력합니다.

Illustrator를 사용하여 구성한 방법은 다음과 같습니다. 자르기 영역이 훨씬 더 큽니다. 제가하는 작업을 볼 수 있도록하기위한 것입니다.
일러스트 레이터와 배경

다음은 배경 이미지에서 출력이 어떻게 보이는지에 대한 예입니다.
배경 이미지의 예

본문 스타일 태그를 사용하여 이미지를 적용하는 방법은 다음과 같습니다. CSS 파일.

배경 : # B2B2B2 url ( 'images / bg.gif') repeat-y center;

다음은 배경 스타일 태그의 해부입니다.

  • # B2B2B2 – 페이지의 전체 배경색을 설정합니다. 이 예에서는 배경 이미지의 회색과 일치하는 것이 회색입니다.
  • url ( 'images / bg.gif') – 사용할 배경 이미지를 설정합니다.
  • repeat-y – 이미지가 y 축에서 반복되도록 설정합니다. 따라서 배경 이미지는 페이지의 상단에서 하단으로 반복됩니다.
  • center – 페이지 중앙에 이미지를 설정합니다.

멋지고 쉽습니다. 하나의 이미지, 하나의 스타일 태그!

댓글 2

  1. 1
  2. 2

당신은 어떻게 생각하십니까?

이 사이트는 Akismet을 사용하여 스팸을 줄입니다. 댓글 데이터 처리 방법 알아보기.