짧은 정보
CSS 버전
가치
url 값은 url() 구조 내부에 지정된 그래픽 파일의 경로입니다. 이 경우 파일 경로는 따옴표(이중 또는 단일)와 없이 둘 다 작성할 수 있습니다. 없음 요소의 배경 이미지를 취소합니다. 상속 부모의 값을 상속합니다.HTML5 CSS2.1 IE Cr Op Sa Fx
개체 모델
document.getElementById("elementID").style.backgroundImage
브라우저
인터넷 익스플로러버전 7.0 이하에서는 hasLayout 속성이 설정된 요소의 테두리 내부에 배경을 적용합니다. 요소에 hasLayout 이 없으면 background-image 속성은 사양에 지정된 대로 요소의 테두리를 따릅니다. 테두리가 실선이 아닌 파선(파선 또는 점선)인 경우 렌더링의 차이가 눈에 띄게 나타납니다.
요소가 scroll 또는 auto 로 설정된 경우 Internet Explorer 8은 배경이 스크롤될 때 1픽셀의 수직 지연을 갖습니다.
Internet Explorer 버전 7.0까지는 상속 값을 지원하지 않습니다.
테이블 행(태그
HTML5 CSS2.1 IE Cr Op Sa Fx
| 1 | 2 | 3 |
결과 이 예안에 크롬 브라우저그림에 나와 있습니다. 하나. 인터넷 브라우저 Explorer, Opera 및 Firefox는 행의 배경을 올바르게 표시합니다(그림 2).
쌀. 1. 각 셀에 대해 배경 반복
쌀. 2. 전체 라인의 배경
그리고 여기서 우리는 주요 사항에 도달합니다. "사이트는 배경에서 시작합니다."와 같이 바꾸어 보겠습니다. 대부분의 블로거는 흰색 배경으로 "고전적인 블로그"를 만들지만 우리는 다른 방향으로 갈 것입니다. 멋진 부동산을 지나 CSS 배경 이미지, 우리는 할 수 없습니다.
그리고 그것은 무엇을합니까? 이 속성 CSS 배경 이미지다른 요소의 배경으로 이미지를 삽입합니다. HTML-페이지. 태그에 국한되지 않습니다. 신체, 그리고 웹사이트 디자인에 널리 사용됩니다. 예를 들면 다음과 같습니다. div, li, p, 표, 머리글, 바닥글.
예를 고려하십시오.
웹사이트 디자인은 배경에서 시작됩니다.
background - 속성의 색상을 설정하는 것이 정확합니다. 배경색, 보험을 위해 사진이 로드되지 않는 경우. 괄호 안 URL()사진이 있는 폴더의 경로를 지정하십시오.
기본적으로 이미지는 전체 브라우저 화면을 채울 때까지 "타일"처럼 반복됩니다. 페이지 아래로 이동하면 "타일"이 두 번째 화면과 세 번째 화면을 모두 채울 것입니다. 페이지 내용이 끝날 때까지 충분합니다. . 그러한 결과가 디자인 아이디어의 최상위가 아니며 가독성이 매우 중요한 포인트인 "화장실"이 아니라 블로그만 가질 것이 분명합니다.
"타일링"을 제거하는 쉬운 방법은 전체 화면을 채우도록 너비가 최소 1024픽셀인 큰 이미지를 사용하는 것입니다. 너무 될거야 좋은 결정찾기 원활한 질감, 복제하는 동안 그림은 하나의 전체가 됩니다.
배경을 더 매력적으로 만드는 방법?
이를 위해 도움을 주신 하나님께 감사드립니다.
- 반복 금지- 반복 비활성화
- 반복 x- 수평으로만 패턴 반복
- 반복- 세로로만 패턴 반복
예를 들어:
블로그 헤더
가로로만 반복되는 배경 텍스처입니다.
다음 도우미 - 속성 배경 위치, 위치를 지정할 수 있습니다. 배경 그림화면의 아무데나. 이 접근 방식은 다음에서 널리 퍼져 있습니다. 현대 웹 디자인. 우리는 사진을 가지고 있지만 콘텐츠의 일부가 아니라 사이트의 장식으로만 사용됩니다.
헤더
지정된 위치가 있는 반복되지 않는 배경의 예입니다.
그림은 한 번만 표시되며 오른쪽에 있습니다.
오른쪽 가장자리의 들여쓰기는 배경에서 텍스트의 충돌을 피하기 위해 200픽셀로 설정됩니다.
화면을 아래로 스크롤할 때 그림이 항상 보이도록 하려면 위의 코드에 속성을 추가해야 합니다. 배경 첨부: 고정;
차이점은 무엇입니까 이미지그리고 배경 이미지?
차이점은 기본, 태그 이미지몸에 직접 삽입 HTML-페이지 및 콘텐츠(그림, 사진, 아바타)에 대한 책임이 있으며 의미론적 부하를 전달합니다. 이미지가 인덱싱되는 것이 매우 중요합니다. 검색 엔진그리고 들어갔다 검색 결과. 속성 CSS 배경 이미지- 사이트를 독특하고 아름답게 만듭니다. 즉, 외부 파일로 가져와야 하는 디자인입니다. CSS스타일 또는 요소 내부 사용 스타일.
물론 그렇다고 해서 그런 것은 아니다 배경 이미지몸에 넣으면 작동하지 않습니다 HTML-페이지. 그러나 디자인과 관련된 모든 것을 CSS. 결과적으로 우리는 깨끗한 HTML-코드:
- 이것은 사이트의 인덱싱에 긍정적인 영향을 미치며 검색 봇은 귀하의 사이트를 좋아하고 더 자주 방문합니다.
- 방문자도 만족할 것입니다. 무게가 가볍기 때문에 사이트가 더 빨리 로드됩니다.
- 웹마스터로서 깨끗한 코드로 작업하는 것이 더 쉽습니다.
글쎄, 우리는 속성을 사용하여 거의 모든 옵션을 고려했습니다 CSS 배경 이미지. 더 연습 친구! 자유롭게 코드를 복사하고 자신만의 옵션을 생각해 보세요!
부동산을 사용하지 않는 사이트는 단 한곳도 없다고 생각합니다 CSS 배경. 이 속성보다 더 간단한 것이 무엇입니까? 그러나 그 가능성은 페이지 배경으로 이미지나 색상의 일반적인 설정보다 훨씬 더 넓습니다. 일부는 익숙할 것이고 일부는 많은 사람들에게 낯설 것입니다. 어쨌든 배경이 어떻게 작동하는지 철저히 아는 것이 유용할 것입니다.
CSS3는 투명도, 여러 이미지를 배경으로 설정과 같은 속성에 많은 새로운 기능을 가져왔지만 이에 대해서는 아래에서 이야기할 것이지만 먼저 속성의 기본 사항을 다룰 것입니다. 배경.
배경색
나는 당신이 이미 여러 번 배경색 할당을 수행했다고 확신합니다. 이는 일반(색상 이름이 사용됨), 16진수 또는 RGB 표기와 같은 여러 유형의 표기법을 사용하여 수행할 수 있습니다. 각 유형은 동일하므로 가장 좋아하는 것을 사용하십시오. 저는 가장 짧은 버전을 사용하려고 하는데, 인식을 위해 더 간단하고 스타일 파일의 크기가 조금 작습니다.
P (배경색: 빨강;) p (배경색: #f00;) p (배경색: #ff0000;) p (배경색: rgb(255, 0, 0;))
CSS3는 투명도 지원을 도입하므로 다음과 같이 색상에 추가할 수 있습니다.
P(배경색: rgba(255, 0, 0, 0.5);)
마지막 숫자는 투명도를 50%로 설정합니다. 투명도 값을 0에서 설정할 수 있습니다(완전히 투명한 배경) ~ 1(완전 불투명).
배경 이미지
이 속성은 또한 매우 자주 사용되며 배경에 이미지를 할당할 수 있습니다. CSS3는 배경에 여러 이미지를 할당하는 기능을 추가하여 각각 일종의 레이어를 생성하므로 각각의 후속 이미지가 이전 이미지와 겹칩니다. 이것이 왜 유용할까요? 모든 것이 매우 간단합니다. 사이트의 각 모서리에 작은 나사를 조여야 한다고 가정해 보겠습니다. 다소 유동적인 레이아웃 조건에서 하나의 이미지를 사용하는 것은 선택 사항이 아닙니다. 따라서 4개의 "레이어"를 만들고 각 이미지를 자체 모서리로 이동하면 문제가 해결됩니다.
본문(배경 이미지: url("image1"), url("image2"), url("image3"))
배경에 하나의 이미지를 할당해야 하는 경우 코드의 첫 번째 이미지만 남겨두므로 이것이 이해할 수 있다고 생각합니다.
이미지를 배경으로 사용할 때 기억해야 할 두 가지 규칙이 있습니다.
- 어떤 이유로 사용자가 이미지를 볼 수 없는 경우 대비되는 배경색을 설정합니다. 사진 표시를 완전히 비활성화하고 트래픽을 절약할 수 있습니다.
- 어떤 내용을 전달하기 위해 배경 이미지를 사용하지 마십시오. 중요한 정보. 위의 이유로 사용자는 그것을 보지 못할 수 있습니다.
여러 배경 이미지에 대한 지원은 매우 광범위합니다. IE8을 포함한 모든 브라우저가 이 속성을 지원합니다.
배경 이미지:
설명
배경 이미지 속성(영어 "배경 이미지"- "배경 이미지"에서) 요소의 배경 이미지를 설정합니다..
메모
배경 이미지를 설정할 때 이미지를 사용할 수 없는 경우 사용할 배경색도 지정해야 합니다. 이미지를 사용할 수 있는 경우 배경색 위에 표시됩니다. (따라서 색상은 이미지의 투명한 부분에서 볼 수 있습니다).
이용약관
CSS3(쉼표로 구분)부터 한 번에 여러 배경 이미지를 지정할 수 있습니다. 이렇게 하면 위쪽 배경 이미지의 투명 영역을 통해 아래쪽 배경 이미지가 표시됩니다.
자바스크립트
[객체] .style .backgroundImage ="[값]";
브라우저 지원
사양
가치
모든 값 CSS 1 CSS 2.0 CSS 2.1 CSS 2.2 CSS 3
없음 배경 이미지가 없음을 지정합니다. URL(
배경 이미지: url(myImage.png );
URL("
배경 이미지: url("myImage.png");
Inherit 요소가 상위 요소의 설정을 상속하도록 지정합니다.
초기 값:"없음".
사용 예
코드 목록
배경 이미지
여러 배경 이미지가 있는 문서.
개체 모델
document.getElementById("elementID").style.backgroundImage
브라우저
Internet Explorer 버전 7.0 이하에서는 hasLayout 속성이 설정된 요소의 테두리 내부에 배경을 적용합니다. 요소에 hasLayout 이 없으면 background-image 속성은 사양에 지정된 대로 요소의 테두리를 따릅니다. 테두리가 실선이 아닌 파선(파선 또는 점선)인 경우 렌더링의 차이가 눈에 띄게 나타납니다.
요소가 scroll 또는 auto 로 설정된 경우 Internet Explorer 8은 배경이 스크롤될 때 1픽셀의 수직 지연을 갖습니다.
Internet Explorer 버전 7.0까지는 상속 값을 지원하지 않습니다.
테이블 행(태그
HTML5 CSS2.1 IE Cr Op Sa Fx
| 1 | 2 | 3 |
Chrome 브라우저에서 이 예제의 결과는 그림 1에 나와 있습니다. 1. 브라우저 Internet Explorer, Opera 및 Firefox는 라인의 배경을 올바르게 표시합니다(그림 2).
쌀. 1. 각 셀에 대해 배경 반복
쌀. 2. 전체 라인의 배경