꼭 알아야 할 CSS 지식-배경 속성-CSS 튜토리얼-php.cn

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

零下一度

풀어 주다： 2017-05-04 17:34:33

원래의

2146명이 탐색했습니다.

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="http://www.php.cn/wiki/904.html" target="_blank">top <code>background-position：<a href="http://www.php.cn/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%가 됩니다.

참고:

1. 본문에 테두리를 설정하면 테두리가 본문의 내용만 둘러싸는 것을 알 수 있습니다. 하지만 본문의 배경색을 설정하면 전체 화면을 채웁니다.

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

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

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