Xiaonei.com CSS code_Experience exchange에 배경 이미지를 추가하기 위한 공통 코드

일련번호 중국어 설명 표시 구문 비고
1 배경색 {배경색: 숫자값}
2 배경 이미지 {배경-이미지: url(URL)|없음}
3 배경 반복 {배경-반복: 상속| no-repeat|repeat|repeat-x|repeat-y}
4 배경 고정 {Background-attachment:fixed|scroll}
5 배경 위치 지정 {Background-position:numeric|top|bottom|left| 오른쪽| 중앙}
6 배경 스타일 {배경: 배경색|배경 이미지|배경 반복|배경 첨부|배경 위치}

1. 배경색: background-color

구문: {배경색: 값}
설명: 매개변수 값은 색상 속성과 동일합니다
참고: HTML에서는 배경을 추가해야 합니다. 개체 색상을 변경하는 방법은 한 가지뿐입니다. 먼저 표를 만들고 표에 배경색을 설정한 다음 개체를 셀에 넣는 것입니다. 이는 더 많은 코드를 필요로 할 뿐만 아니라 테이블의 크기와 위치에도 약간의 문제가 발생합니다. 이제 CSS를 사용하여 직접 수행하는 것이 쉽고 개체 범위가 매우 넓어 텍스트 조각이 될 수도 있고 단어나 문자가 될 수도 있습니다.
예: 일부 텍스트에 배경색 추가 일부 텍스트에 배경색 추가
테이블 뒷면 색상: 스타일="배경색:빨간색"

2. 배경 이미지: background-image

구문: {Background-image: url(URL)|none}
설명: URL은 배경 이미지의 저장 경로입니다. 배경 이미지 저장 경로 대신 "none"을 사용하면 아무것도 표시되지 않습니다.
예: 텍스트 일부에 배경 이미지 추가 .imgbgstyle { background-image: url(logo.gif)}
3. 배경 반복: background-repeat

구문: {ground-repeat:inherit|no-repeat|repeat|repeat-x|repeat-y}
기능: 배경 이미지 반복은 배경 이미지 타일링을 제어합니다. 즉, 배경 위치 제어와 결합하여 배경 이미지를 웹 페이지 어딘가에 별도로 표시할 수 있습니다.
설명: 매개변수 값 범위:
·상속 상속
·반복 없음 타일 배경 이미지
·repeat
·repeat-x는 이미지 타일을 가로 방향으로만 만듭니다
·repeat-y는 이미지 타일을 세로 방향으로만 만듭니다
참고: 배경 이미지 반복 속성의 경우 브라우저 기본값은 배경 이미지가 수평 및 수직 방향으로 타일링되는 것입니다.
4． 배경 고정: background-attachment

구문: {Background-attachment:fixed|scroll}
설명: 매개변수 값 범위
·fixed: 웹 페이지를 스크롤할 때 배경 이미지는 배경 이미지를 기준으로 합니다. 브라우저 창 일반적으로 고정
·스크롤: 웹 페이지를 스크롤할 때 배경 이미지가 브라우저 창을 기준으로 함께 스크롤됩니다.
참고: 배경 이미지는 스크롤에 따라 배경 이미지가 스크롤되는지 여부를 제어하기 위해 고정됩니다. 웹페이지의. 배경 이미지 고정 속성을 설정하지 않으면 웹 페이지 스크롤에 따라 브라우저의 기본 배경 이미지도 함께 스크롤됩니다. 지나치게 화려한 배경 이미지가 스크롤 시 시청자의 시력을 손상시키는 것을 방지하기 위해 브라우저 창에 번들로 포함되어야 하는 배경 이미지와 텍스트 콘텐츠를 분리할 수 있습니다.
예: 배경 패턴이 텍스트와 함께 "롤링"되는 것을 방지하는 CSS
BODY { background: purple url(bg.jpg) background-attachment:fixed }
5. 배경 위치 지정: background-position

구문: {Background-position: value|top|bottom|left|right|center}
기능: 배경 위치 지정은 표시되는 배경 이미지의 위치를 ​​제어하는 ​​데 사용됩니다. 웹 페이지.
설명: 매개변수 값 범위
·길이 단위를 갖는 숫자 매개변수
·top: 전경 개체의 상단을 기준으로
·bottom: 전경 개체의 하단을 기준으로
·왼쪽 : 전경 객체를 기준으로 왼쪽 정렬
·right : 전경 객체를 기준으로 오른쪽 정렬
·center : 전경 객체를 기준으로 가운데 정렬
·비례 관계
키워드는 다음과 같이 설명됩니다.
상단 왼쪽 = 왼쪽 상단 = 0% 0%
상단 = 상단 중앙 = 중앙 상단 = 50% 0%
오른쪽 상단 = 상단 오른쪽 = 100% 0%
왼쪽 = 왼쪽 중앙 = 중앙 왼쪽 = 0% 50%
가운데 = 가운데 가운데 = 50% 50%
오른쪽 = 오른쪽 가운데 = 가운데 오른쪽 = 100% 50%
하단 왼쪽 = 왼쪽 하단 = 0% 100%
하단 = 하단 중앙 = 중앙 하단 = 50% 100%
오른쪽 하단 = 오른쪽 하단 = 100% 100%
참고: 매개변수의 중심이 다른 매개변수 앞에 사용되는 경우 수평 중심을 의미합니다. 다른 매개변수 뒤에 사용되며 이는 수직 센터링을 의미합니다.
6. 배경 스타일: 배경

구문: {배경:배경 색상|배경 이미지|배경 반복|배경 첨부|배경 위치}
기능: 배경 속성이 더 명확한 배경입니다. 관계 속성의 경우. 다음은 몇 가지 배경 선언입니다.
예:
BODY { background: white url(http://www.htmlhelp.com/foo.gif) }
BLOCKQUOTE { background: #7fffd4 }
P { background: url(../Backgrounds/pawn.png) #f0f8ff fix }
TABLE { background: #0c0 url(leaves.jpg) no-repeat 오른쪽 하단 }
참고: 값이 아닌 경우 When 지정하면 초기값이 허용됩니다. 예를 들어 위의 처음 세 가지 규칙에서 배경 위치 속성은 0% 0%로 설정됩니다. 사용자의 스타일시트와 충돌을 피하기 위해 배경과 색상을 함께 지정해야 합니다.