CSS3의 새로운 배경 시리즈 배경에 대한 자세한 설명

1. 이전에 배운 배경 속성을 검토하세요

1.1 background-color
1.2 background-image
1.3 background-repeat
1.4 background -position
1.5 background-attchment
1.6 background

2. CSS3 새 배경 속성

2.1 배경-origin
2.2 다중 배경
2.3 배경 크기

1.1 배경색 속성: background-color

색상을 표현하는 세 가지 방법이 있습니다: 단어, RGB 표현, 16 기본 표기법

1. 단어: 단어로 표현할 수 있는 것은 단순한 색상

2입니다. RGB 표기법

rgb는 삼원색을 나타냅니다. "빨간색", "녹색", "파란색".
광학 디스플레이에서 각 픽셀은 발광 소자의 3원색으로 구성되며 밝기에 따라 서로 다른 색상으로 조정됩니다.

쉼표로 구분하고, r, g, b의 값은 각각 0부터 255까지, 총 256개의 값을 갖는다.

绿色：
background-color: rgb(0,255,0);  
蓝色：
background-color: rgb(0,0,255);

黑色：（光学显示器，每个元件都不发光，黑色）
background-color: rgb(0,0,0);

3.

#으로 시작하는 모든 값은 16진수입니다.

红色：
background-color: #ff0000;

16进制表示法，也是两位两位看，看r、g、b，但是没有逗号隔开。
ff就是10进制的255 ，00 就是10进制的0，00就是10进制的0。所以等价于rgb(255,0,0);

보충:
십진법의 기본 숫자(총 10): 0, 1, 2, 3, 4, 5, 6, 7, 8, 9
16진수 기본 숫자(총 16개): 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c, d, d, e, f

16진수에서 13은 무엇을 의미하나요?
는 1 16과 3 1을 의미합니다. 19입니다. 이것이 위치의 개념입니다. 첫 번째 사람은 16의 개수를 나타내고, 마지막 사람은 1의 개수를 나타냅니다.

1.2 background-image

는 상자에 배경 image을 추가하는 데 사용됩니다. 배경이 자연스럽게 채워집니다.

background:url(images/1.jpg);

1.3 background-repeat

배경 이미지를 반복적으로 반복할지 여부를 설정합니다.

ground-repeat:no-repeat; 반복하지 않음 background-repeat:repeat-x; 수평으로 반복 background-repeat:repeat-y; 수직으로 반복

1.4 background-position

배경 위치 속성

background-position:向右移动量 向下移动量

단어로 설명:

왼쪽과 오른쪽을 설명하는 단어: left, 중앙, right
설명 상위 및 하위 단어: top, center, bottom

右下角：background-position: right bottom;

1.5 배경 이미지 스크롤 여부(Background-attchment)

scroll: 스크롤. 기본값 고정: 고정. 스크롤 막대가 스크롤되면서 스크롤되지 않습니다. local

1.6 배경 종합 속성

Background 속성은 border와 동일하며 종합 속성입니다:

background:red url(1.jpg) no-repeat 100px 100px fixed;

等价于：
background-color:red;
background-image:url(1.jpg);
background-repeat:no-repeat;
background-position:100px 100px;
background-attachment:fixed;

모든 부분을 생략할 수 있습니다:

background: red;

상자에 배경 이미지와 배경 색상이 있는 경우. 실제로는 주로 사진을 표시하고 풍부한 곳은 색상으로 가득 차 있습니다.

background: blue url(images/wuyifan.jpg) no-repeat 100px 100px;

2.1 배경 이미지의 기준점(Background-origin)

border-box : 테두리를 무시하고 시작점 0,0부터 바로 타일링을 시작합니다. of the border padding-box: 기본값, 패딩 무시, 패딩 시작점 0,0에서 바로 타일링 시작 content-box: 타일링 시작 콘텐츠 부분 포장 시 패딩을 위한 공간이 확보됩니다. 따라서 패딩이 영향을 미칩니다

2.2 다중 배경

CSS3-새로운 배경 시리즈 배경. 배경 이미지는 쉼표로 구분되며 여러 그룹으로 작성할 수 있습니다. 먼저 렌더링된 이미지가 나중에 렌더링된 이미지를 가릴 수 있습니다.

background:  url(images/1.jpg) 0 0 no-repeat,url(images/2.jpg) 121px 0 no-repeat,url(images/3.jpg) 242px 0 no-repeat;

2.3 배경 이미지의 크기를 조절합니다. (Background-size)

Background-size: value

Value:

** 길이 값 **px Percent: 상자 너비 참조 auto: 배경 이미지의 실제 크기

contain: Full display(크기 조정 시 이미지의 너비나 높이가 상자 가장자리에 "접촉"하면 변경이 중지됩니다.)

cover: 완전히 덮여 (컨테이너를 완전히 덮도록 배경 이미지의 크기를 조정하세요, 배경 이미지가 컨테이너를 초과할 수 있습니다)

늘리기 위한 너비와 같은 값이 하나만 있는 경우 높이는 기본적으로 자동이며 동일한 비율을 유지합니다.
두 개의 값이 있을 경우 너비와 높이가 각각 해당 값으로 늘어나 변형될 수 있습니다.

위 내용은 CSS3의 새로운 배경 시리즈 배경에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!