꼭 알아야 할 CSS 지식-배경 속성

CSS에서는 단색을 배경으로 사용할 수 있고, 이미지를 배경으로 사용할 수도 있습니다.
배경 설정 정보:

• background-color

   background-color:red;

  로그인 후 복사

  —참고: background-color는 설정할 수 없습니다.을 상속하며 기본값은 투명합니다. 투명하다는 것은 "투명하다"는 뜻입니다. 즉, 요소가 배경색을 지정하지 않으면 배경이 투명해 상위 요소의 배경이 표시됩니다.

• background-image

   background-image:url(lks.jpg);

  로그인 후 복사

  — 참고: 배경 이미지는 상속될 수 없으며 배경 이미지는 상속될 수 없습니다. 크기가 조정되었습니다.
  이미지 형식에 대한 브라우저 지원:

• gif 애니메이션 256색

• jpg 풍부한 색상, 브라우저 지원 효과가 좋습니다.

• png w3c 형식을 권장하지만 브라우저 지원이 별로 좋지 않습니다(IE6, IE7, 지원하지 않음).

• 백그라운드 반복

  이런

• 백그라운드 -attachment

  background-repeat:repeat;        //默认 背景图像将在垂直方向和水平方向重复。
  background-repeat:repeat-x;      //背景图像将在水平方向重复。
  background-repeat:repeat-y;      //背景图像将在垂直方向重复。
  background-repeat:no-repeat;     //背景图像将仅显示一次。

  로그인 후 복사

• background-position
  — 참고: background-attachment를 설정해야 합니다. 이 속성이 Firefox 및 Opera에서 제대로 작동하도록 "수정"해야 합니다.

• 배경 위치: <a href="//m.sbmmt.com/wiki/904.html" target="_blank">top <code>background-position：<a href="//m.sbmmt.com/wiki/904.html" target="_blank">top</a> left； left;
  첫 번째는 세로 방향을 나타내고 두 번째는 공백으로 구분된 가로 방향을 나타냅니다.
  세로 방향 설정 가능: 위쪽, 가운데, 아래
  가로 방향 설정 가능: 왼쪽, 가운데, 오른쪽; 키워드를 지정하면 두 번째 값은 "center"가 됩니다.
  

• background-position：50% 50%；기본값: 0% 0%.
  첫 번째 값은 가로 위치이고 두 번째 값은 세로 위치입니다.
  왼쪽 상단이 0% 0%입니다. 오른쪽 하단은 100% 100%입니다.
  하나의 값만 지정하면 다른 값은 50%가 됩니다.
  

• background-position：20px 30px；첫 번째 값은 가로 위치, 두 번째 값은 세로 위치입니다.
  왼쪽 상단이 0 0입니다. 단위는 픽셀(0px 0px) 또는 기타 CSS 단위입니다.
  하나의 값만 지정하면 다른 값은 50%가 됩니다.
  

2. 이미지를 배경으로 사용할 경우 테두리로 둘러싸인 부분이 아닌 화면의
가시 영역을 기준으로 이미지가 배치됩니다. 3. 배경을 한번에 설정하고 싶을 때는 주문이 매우 조심스럽습니다.

background：red url(xin.jpg) norepeat fixed center center;각 매개변수는 공백으로 구분되며, 이어서 색상, 그림, 반복, 고정 방식, 위치 등의 순으로 구성됩니다.
실제로 브라우저에서 위치를 바꿔본 결과 IE6과 IE7은 out-of-order 설정을 잘 지원하지 못하는데, 최신 브라우저에서는 여전히 지원할 수 있다는 사실을 발견했습니다. 호환성을 위해 위의 순서를 사용하는 것이 좋습니다.

무료 CSS 온라인 동영상 튜토리얼

css 온라인 매뉴얼

php.cn Dugu Jiujian (2) - CSS 동영상 튜토리얼

위 내용은 꼭 알아야 할 CSS 지식-배경 속성의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!