CSS의 배경 속성 사용 요약

Background 배경 속성은 CSS에서 중요한 속성입니다. 배경 속성을 사용하면 채워진 배경의 색상 설정, 자신의 그림을 배경으로 사용하여 그림이 전체 요소를 덮을 때까지 가로 및 세로로 반복되도록 하고 제어하는 ​​등 배경 요소의 다양한 스타일을 설정할 수 있습니다. 요소의 배경 그림 위치 등 웹 페이지 레이아웃에서는 그림을 배경으로 사용하는 경우가 많습니다. 일반적으로 개체 그림은 배경 속성 인스턴스로 설정됩니다. 먼저 배경색을 설정한 다음 그림을 배경으로 설정하고 그림이 반복되는지 확인합니다. 물체 위치에서 그림을 따르십시오. 이전 배경색은 설정할 필요도 없고 필요하지도 않습니다. 일반적으로 그림을 개체 배경으로 사용합니다. 그림의 반복 표시 여부를 설정하려면 거리 위치가 설정됩니다. 다음 내용에서는 배경 속성의 다양한 용도를 구체적으로 설명합니다.

먼저 php 중국어 홈페이지 관련 무료 강좌를 배울 수 있습니다

1. "CSS 0 기본 입문 튜토리얼"

에서

CSS Background 챕터 코스를 배워보세요.

2. "Dark Horse Programmer CSS Video Tutorial"의 Background and margin 동영상 강좌를 시청하세요. CSS Knowledge - background 속성

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

이미지를 배경으로 사용할 경우 테두리로 둘러싸인 부분이 아닌 화면에서 보이는 영역을 기준으로 이미지가 배치됩니다. 각 매개변수는 공백으로 구분되며, 색상, 그림, 반복, 고정 방식, 위치 순으로 표시됩니다.

2. css의 배경 관련 속성

퍼센트/길이: 백분율인 경우 배경 이미지의 크기는 컨테이너에 백분율을 곱한 값입니다. 하나만 설정하고 두 번째는 자동으로 설정합니다(원본 배경 이미지와 동일한 화면 비율을 유지하기 위해). 둘 다 100%로 설정하면 배경 이미지가 컨테이너를 채우지만 가로 세로 비율이 변경됩니다.

contain: 컨테이너에는 배경 이미지의 고정된 비율에 따라 전체 배경 이미지가 포함됩니다. 배경 이미지의 크기는 배경 이미지의 고정된 비율에 따라 확대됩니다. 한 쪽이 컨테이너의 경계에 도달할 때까지 다른 쪽은 비어 있는 경우가 많습니다(반복이 없는 경우).

표지: 배경 이미지가 전체 컨테이너를 채울 때까지 고정된 가로세로 비율에 따라 확대됩니다(배경 이미지의 짧은 쪽도 컨테이너 경계에 도달함). 배경 이미지의 일부가 컨테이너를 초과하여 잘립니다.

3.

CSS의 배경 속성에 대한 자세한 설명

같은 요소에서 배경 합성 속성은 앞에 쓰고, 뒤에는 개별적으로 설정해야 하는 배경 속성을 씁니다. 이유: 장강의 앞파가 뒷파를 밀고 앞파가 해변에서 죽는다

같은 요소에 여러 개의 배경 이미지를 추가할 경우 다른 배경 속성은 개별적으로만 쓸 수 있으며, 복합 속성 약어는 사용할 수 없습니다.

중첩된 상위-하위 요소에서는 동일한 이름으로 속성을 작성하지 않는 것이 좋습니다. 이유: 하위 요소의 크기가 상위 요소의 크기보다 크거나 같으면 하위 요소가 상위 요소의 스타일을 덮어쓰게 됩니다.

실제 작업에서는 배경 이미지를 더 많이 사용하고 사용을 줄입니다. 삽입된 사진.

4.

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

border-box: 테두리를 무시하고 테두리 패딩 상자의 시작점 0,0에서 직접 타일링 시작: 기본값, 패딩을 무시하고 시작 타일링 직접 패딩 시작점 0,0부터 타일링 시작 콘텐츠 상자: 콘텐츠 부분부터 타일링을 시작하면 패딩 위치가 예약됩니다. 그래서 패딩이 영향을 미치게 됩니다

5. 웹 페이지에서 CSS 배경 이미지 및 배경색을 설정하는 방법

여기서 CSS 배경은 웹 페이지에서 CSS를 통해 다양한 배경 스타일을 설정하는 것과 같이 CSS를 통해 개체에 배경 속성을 설정하는 것을 의미합니다.

Css 배경 배경 기능: 단색 배경을 설정합니다. 배경배경은 객체의 배경색을 단색으로 설정하고, 이미지를 배경으로 설정할 수 있습니다. 개체의 배경을 그림으로 설정할 수 있습니다. 배경이 그림인 경우 그림을 가로로 반복적으로 타일링하거나 그림을 개체의 임의 위치에 개체의 배경으로 고정할 수 있습니다.

6. CSS 배경 속성 및 CSS3 배경 이미지 설정 요약 공유

background 모든 배경 속성을 하나의 명령문으로 설정

Background-attachment 배경 이미지를 고정할지 아니면 페이지의 나머지 부분과 함께 스크롤할지 설정

background- color 요소의 배경색을 설정합니다.

ground-image 요소의 배경 이미지를 설정합니다.

background-position 배경 이미지의 시작 위치를 설정합니다.

관련 질문 및 답변

1. CSS 배경 이미지 로딩 속도를 높이세요

2. iOS에서는 background:unset을 사용할 수 없나요? 그렇다면 배경색을 취소하고 싶다면 어떻게 해야 할까요?

3.

몸의 배경 위치

[관련 추천]

1. PHP 중국어 웹사이트 무료 튜토리얼:

"CSS 온라인 매뉴얼"

2. PHP 중국어 웹사이트 무료 비디오 튜토리얼:

"손끝에서 배우기 " HTML 비디오 튜토리얼》

3. PHP 중국어 웹사이트 무료 비디오 튜토리얼:

《php.cn Dugu Jiujian (2) - CSS 비디오 튜토리얼》

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