중첩 사이트 : 배경 그림을 만드는 방법을 html로

많은 초보 웹 디자이너 만 사이트의 창조의 본질을 탐구하기 위해, 종종 HTML 배경 이미지를 수행하는 방법 궁금합니다. 그들 중 일부는이 문제를 해결할 수 있다면, 그것은 여전히 모니터에 이미지의 전체 폭을 스트레칭시 문제입니다. 동시에 나는 모든 브라우저에서 동일하게 표시되는 사이트를보고 싶다, 그래서 크로스 브라우저의 요구 사항을 충족해야합니다. 두 가지 방법으로 배경을 설정할 수 있습니다 사용하여 HTML 태그 와 CSS 스타일을. 자신을 위해 각각 최적의 옵션을 선택합니다. 해당 코드는 별도의 파일에 저장되며 주요 사이트의 태그에 별도의 스피커를 차지하지 않지만, 먼저 우리 사이트의 배경에 이미지를 설치하기위한 간단한 방법을 생각 해보자 때문에 물론, CSS 스타일은 훨씬 더 편리합니다.

기본 HTML 태그는 배경을 만들 수 있습니다

그래서 우리는 화면에 HTML에서 배경 이미지를 만드는 방법의 문제로 이동합니다. 이 그라데이션 배경을 만들거나 그것을 단색 페인트에 충분하지만, 당신은 배경 이미지를 삽입해야하는 경우, 모니터의 전체 폭을 늘릴 수 없습니다 : 아름다운 사이트를보고하기 위해, 당신은 하나 개가 아니라 중요한 세부 사항을 이해해야합니다. 이미지가 픽업 또는 사이트의 페이지를 표시하는이 확장, 당신의 자신의 디자인을 만들기 위해 원래 필요했다. 배경 이미지가 준비 만되면,«이미지»라는 이름의 폴더에 드래그합니다. 그것은, 우리는 모든 사용 된 이미지, 애니메이션 및 기타 그래픽 파일을 저장합니다. 이 폴더는 모든 HTML 파일과 루트 디렉토리에 위치해야합니다. 이제와 코드로 이동할 수 있습니다. 배경 그림을 변경됩니다하는 코드를 작성하는 몇 가지 옵션이 있습니다.

1. 태그 속성을 작성합니다.
2. HTML 코드에서 CSS 스타일을 통해.
3. 별도의 파일에 CSS 스타일을 작성합니다.

HTML에서와 같이 배경 이미지를 만들려면, 당신이 결정하지만, 나는 그것이 가장 최적의 것입니다 방법에 대한 몇 마디 말을하고 싶습니다. 첫 번째 방법은 태그 속성을 기록함으로써 인 긴 폐기되었다. 두 번째 옵션은이 밝혀 때문에, 매우 드물게 사용되는 것과 동일한 코드를 많이. 세 번째 옵션은 가장 일반적이고 효과적입니다. 다음은 HTML 태그의 예는 다음과 같습니다

1. index.htm 파일의 태그 속성 (본체)를 통해 제 1 기록 방법. (본체 배경 = "FOLDER_NAME / Nazvanie_kartinki.rasshirenie") (/ 본체) : 이것은이 형태로 저장된다. 우리가 제목«사진»과 확장 JPG, 우리는«이미지는»다음 HTML 코드 항목은 다음과 같을 것이다,라는 이름의 폴더와 사진이있는 경우 즉, (몸 배경 = "이미지 / picture.jpg 대신") (/ 몸) .
2. 두 번째 방법은 CSS 스타일을 기록 포함 있지만 이름 index.htm으로와 동일한 파일에 기록됩니다. (바디 스타일 = "배경 : 홈페이지 ( '../ 이미지 / picture.jpg 대신')").
3. 기록하는 세번째 방법은 두 개의 파일로된다. (머리) (링크에 rel = "스타일"유형 = "텍스트 / CSS는"HREF = "HTTP : // 사이트 / 기사 / 193110 / %의 D0 %의 9F 이름 index.htm으로 태그 (머리)와 문서는 라인을 작성 D1 %의 % 83 % D1 %의 82 % D1 %의 8C_ % D0 %의 CSS_faylu BA ") (/ 헤드). 파일이라고있는 style.css 스타일은 이미 쓰기 : 몸 {배경 : 홈페이지 (이미지 / picture.jpg 대신 ')}.

배경 이미지를 만들 수있는 HTML에서, 우리는 이해한다. 지금 당신은 전체 화면의 폭을 가로 질러 이미지를 스트레칭하는 방법을 알아낼 필요가있다.

방법은 윈도우의 폭에 배경 이미지를 스트레칭

우리는 비율의 형태로 우리의 화면을 나타냅니다. 그것은 화면의 전체 폭과 길이가 100 % × 100 %가 될 것으로 밝혀졌습니다. 우리는이 폭에 이미지를 늘릴 필요가있다. 모니터의 전체 폭과 길이에 걸쳐 이미지를 늘릴 것 이미지 파일 기록있는 style.css 라인에 추가합니다. 그것은 CSS 스타일로 작성되기 때문에? 그것은 간단하다!

몸

{

배경 : 홈페이지 (이미지 / picture.jpg 대신 ')

배경 사이즈 : 100 %; / *이 포스트는 * / 대부분의 최신 브라우저에 적합

}

그래서 우리는 화면에 HTML의 사진 배경을 만드는 방법을 알아 냈다. index.htm 파일에 기록하는 방법도 있습니다. 이 방법 오래된하지만,하지만, 초보자가 알고 이해하는 것이 필요하다. 태그 (헤드) (스타일) 사업부 {배경 - 크기 : 커버; } (/ 스타일) (/ 헤드),이 기록은 우리가 윈도우의 전체 폭에 걸쳐 배치 될 배경에 대한 특별한 장치를 할당하는 것을 의미한다. 우리는 이미지가 현대 브라우저 중의 화면의 전체 폭에 뻗어되도록, 배경 사진 HTML 사이트를 만드는 방법 두 가지를 고려했다.

고정 된 배경을 확인하는 방법

향후 웹 자원의 배경으로 사진을 사용하기로 결정한 경우가하지의 길이가 늘어과 미적 외관을 망치고하지 않도록, 당신은 단지 그것을 해결하는 방법을 알고 있어야합니다. 단순히 작은 추가 등록 할 HTML 코드를 사용하여. 당신은 배경 후 문구를 추가 할 수있는 style.css를 제출해야합니다 : 홈페이지 (이미지 / picture.jpg 대신 ') 고정을; 또는 대신 세미콜론 별도 라인 후에 첨가 - 위치 : 고정. 따라서, 배경 화면이 고정됩니다. 사이트에 컨텐츠를 스크롤하는 동안, 당신은 선이 움직이는 텍스트를 볼 수 있지만 배경 장소에 남아 있습니다. 그래서 당신은 여러 가지 방법으로, HTML 배경 이미지 작업을 수행하는 방법을 배웠습니다.

HTML에서 테이블 작업

많은 경험이 웹 개발자는 테이블과 블록에 직면, 종종 HTML 이미지 배경 테이블을 만드는 방법을 이해하지 않습니다. 과 마찬가지로 팀의 HTML 및 CSS 스타일, 웹 프로그래밍 언어는 매우 간단하다. 그리고이 문제에 대한 해결책은 줄의 코드 쌍을 작성하는 것입니다. 이미 태그 (TR) 및 (TD)로 표시된 바와 같이, 각각 행과 열, 표를 작성하는 것을 알아야한다. 배경 = URL 사진 : 이미지의 형태로 테이블의 배경을 확인하기 위해, 태그 (테이블), (TR) 또는 (TD) 참조 이미지를 기준으로 간단한 문구에 추가 할 필요가있다. 명확하게하기 위해, 우리는 몇 가지 예를 제공합니다.

대신 배경의 그림과 표 : HTML 예제

2x3이다 테이블을 그리고 그 폴더 "화상"에 저장된 배경 이미지 확인 (표 배경 = "이미지 / picture.jpg 대신") (TR) (TD) 1 (/ TD) (TD) 2 (/ TD) (TD) 3) (/ TD) (/ TR) (TR) (TD) 4 (/ TD) (TD) 5 (/ TD) (TD) 6 (/ TD) (/ TR) (/ 표). 그래서 우리 테이블은 그림의 배경에 그려집니다.

지금의 2x3 동일한 판 크기를 그리는하지만 1, 4, 5 및 6 (표) 번째 열 (TR)의 사진 (TD 배경 = "이미지 / picture.jpg 대신") 1 (/ TD) (TD) (2)를 삽입 (/ TD) (TD) 3 (/ TD) (/ TR) (TR) (TD 배경 = "이미지 / picture.jpg 대신") 4 (/ TD) (TD 배경 = "이미지 / picture.jpg 대신") 5- ( / TD) (TD 배경 = "이미지 / picture.jpg 대신") 6 (/ TD) (/ TR) (/ 표). 우리는 배경은 우리가 전체 테이블을 등록하지하는 그 세포에 나타나는 것을 볼 수 있습니다보고 후.

크로스 브라우저 호환성 사이트

크로스 브라우저 호환성 웹 리소스와 같은 것이있다. 이 사이트는 동일하게 다른 유형 및 브라우저 버전에 표시되는 것을 의미한다. 해야 HTML 코드 필요한 브라우저를 사용자 정의하고 CSS 스타일. 또한, 스마트 폰의 현대 시대에, 많은 웹 개발자는 사이트를 만들려고하고 모바일 버전 및 컴퓨터 모양에 맞게.