CSS에 배경 이미지를 어떻게 도입하나요?

배경 이미지를 추가하는 CSS 코드:

1. 배경색: background-color

구문: {배경색: 숫자 값}

참고: HTML에서는 개체에 배경색을 추가하는 방법은 한 가지뿐입니다. 먼저 표를 만들고 표에 배경색을 설정한 후 개체를 셀에 넣기만 하면 됩니다. 이는 더 많은 코드를 필요로 할 뿐만 아니라 테이블의 크기와 위치에도 약간의 문제가 발생합니다.

테이블 뒷면 색상: style="Background-color: red"

2. 배경 이미지: background-image

구문: {Background-image: url(url)|none}

3. 배경 반복: background-repeat

구문: {Background-repeat: 상속|no-repeat|repeat|repeat-x|repeat-y}

기능: 배경 이미지 반복 제어 여부 배경 이미지가 타일링되어 있는지 여부, 즉 배경 위치 제어와 결합되어 배경 이미지가 웹 페이지의 어딘가에 별도로 표시될 수 있습니다.

설명: 매개변수 값 범위:

·상속 상속

·no-repeat는 타일 배경 이미지를 반복하지 않습니다.

·repeat - x는 이미지 타일을 가로 방향으로만 만듭니다.

·repeat-y는 이미지 타일을 세로 방향으로만 만듭니다.

참고: 배경 이미지 반복 속성이 지정되지 않으면 브라우저 기본값은 배경 이미지가 수평 및 수직으로 타일링되는 것입니다.

4. 배경 고정: background-attachment

구문: {Background-attachment: 고정|스크롤}

·fixed: 웹페이지를 스크롤할 때 배경 이미지는 브라우저를 기준으로 고정됩니다. 고정

·스크롤: 웹페이지를 스크롤할 때 배경 이미지가 브라우저 창을 기준으로 함께 스크롤됩니다.

참고: 배경 이미지가 고정되어 있는지 여부를 제어합니다. 웹 페이지 스크롤에 따라 변경됩니다. 배경 이미지 고정 속성을 설정하지 않으면 웹 페이지 스크롤에 따라 브라우저의 기본 배경 이미지도 함께 스크롤됩니다. 지나치게 화려한 배경 이미지가 스크롤 시 시청자의 시력을 손상시키는 것을 방지하기 위해 브라우저 창에 번들로 포함되어야 하는 배경 이미지와 텍스트 콘텐츠를 분리할 수 있습니다.

5． 배경 위치 지정: background-position

구문: {Background-position: value|top|bottom|left|right|center}

기능: 배경 위치 지정은 배경 이미지를 제어하는 ​​데 사용됩니다. 웹 페이지에서 에 표시된 위치.

·길이 단위가 있는 숫자 매개변수

·top: 전경 개체를 기준으로 위쪽 정렬

·right: 전경 개체를 기준으로 오른쪽 정렬

·center: 전경 개체의 중심을 기준으로 정렬

·비례 관계

키워드 설명은 다음과 같습니다.

top 왼쪽 = 왼쪽 상단 = 0 0

상단 = 상단 중앙 = 중앙 상단 = 50 0

오른쪽 상단 = 상단 오른쪽 = 100 0

왼쪽 = 왼쪽 중앙 = 가운데 왼쪽 = 0 50

가운데 = 가운데 가운데 = 50 50

오른쪽 = 오른쪽 가운데 = 가운데 오른쪽 = 100 50

왼쪽 아래 = 왼쪽 아래 = 0 100

하단 = 하단 중앙 = 중앙 하단 = 50 100

오른쪽 하단 = 오른쪽 하단 = 100 100

참고: 매개변수의 중앙이 다른 매개변수 앞에 사용되면 수평 중심맞춤을 의미합니다. 다른 매개변수 뒤에 사용하면 수직 중심맞춤을 나타냅니다.

6. 배경 스타일: 배경

구문: {배경: 배경 색상|배경 이미지|배경 반복|배경 첨부|배경 위치}

기능: 컨텍스트 속성은 보다 명시적인 컨텍스트-관계 속성의 약어입니다. 여기에 몇 가지 배경이 담긴 진술이 있습니다.

추가 정보:

Cascading Style Sheets(영어 전체 이름: Cascading Style Sheets)는 HTML(Standard Generalized Markup Language) 또는 XML(Standard Generalized Markup Language)을 표현하는 데 사용되는 애플리케이션입니다. 언어의 하위 집합) 및 기타 파일 스타일 컴퓨터 언어입니다. CSS는 웹페이지를 정적으로 수정할 수 있을 뿐만 아니라 다양한 스크립트 언어와 협력하여 웹페이지의 다양한 요소의 형식을 동적으로 지정할 수도 있습니다.

CSS는 웹페이지의 요소 위치 레이아웃에 대해 픽셀 수준의 정밀한 제어를 수행할 수 있고 거의 모든 글꼴 크기 스타일을 지원하며 웹페이지 개체 및 모델 스타일을 편집할 수 있는 기능을 갖추고 있습니다.