배경 이미지 (CSS 속성)

설명 이 속성은 지정된 URI를 통해 요소의 배경 이미지를 설정합니다. 이미지는 배경색 위에 배치되며 이미지가 불투명하면 배경색은 그 아래에 보이지 않습니다. 배경 이미지를 설정할 때 이미지를 사용할 수없는 경우 가능한 경우 배경색을 설정하십시오. 요소의 배경은 해당 요소의 너비와 높이로 덮인 영역입니다 (해당 치수가 명시 적으로 설정되어 있는지 또는 내용이 지시되는지); 또한 패딩과 경계로 덮인 영역도 포함됩니다. 요소에 적용되는 배경색 (또는 배경 이미지)은 해당 요소의 전경 함량 아래에 나타나고 요소의 패딩 및 테두리 속성으로 덮여 있습니다. 이 적용 범위 영역은 요소가 투명한 곳에서 분명합니다 (또는 점선 또는 점선) 테두리 및 배경은 경계 아래 (또는 점 사이) 아래에 보입니다. 인터넷 익스플로러 버전은 최대 6 개를 포함하여 투명한 경계를 지원하지 않습니다. 해당 요소의 일부 영역은 배경 이미지가 표시되도록 볼 수 있어야합니다. 요소의 내용 또는 차원에 의해 정의 된 고유 높이가없는 경우 배경에는 표시 할 공간이 없습니다. 요소에 튀어 나오지 않은 플로트 아동 만 포함 된 경우 (명확하게 참조하십시오. 기본적으로 배경 이미지는 요소의 왼쪽 상단 (배경 위치)에 배치됩니다. x 및 y 축 (배경 반복)을 따라 반복되며 문서로 스크롤됩니다. 이들은 명시 적으로 다른 것을 설정하지 않은 경우 적용되는 기본 설정입니다. 다른 배경 속성으로 조정할 수 있습니다. 이미지를 위치시키고 제어하는 ​​데 사용할 수있는 방법은 아래의 다른 관련 사항을 참조하십시오.

example

이 스타일 규칙은 배경을 할당합니다 ID "example"을 사용하여 요소에 대한 이미지

#example {
  background-image:
  ➥    url(images/bg.gif);
}

value URI 값 이미지를 찾을 수있는 위치를 지정합니다. 값은 배경 이미지가 표시되지 않도록합니다. 이것은 기본 설정이므로 이전 배경 이미지 선언을 무시하지 않는 한 명시 적으로 정의 할 필요가 없습니다. 상속 값은 요소가 부모의 배경 이미지를 물려 받게합니다. 요소의 상속 배경 이미지가 부모의 이미지와 겹칠 가능성이 높기 때문에이 접근법은 일반적으로 취하지 않을 것입니다. 대부분의 경우 다른 배경 이미지 또는 배경색이 설정되지 않는 한 부모의 배경 이미지는 요소의 투명 배경을 통해 볼 수 있습니다. CSS 배경 이미지에 대한 자주 묻는 질문 (FAQ) CSS의 전체 요소를 커버하기 위해 배경 이미지를 설정하려면 배경 이미지를 전체 요소를 덮으려면 '배경 크기'속성을 '덮개'값으로 사용할 수 있습니다. . 이것은 컨테이너를 채우기 위해 가능한 한 큰 이미지를 스케일링하면서 종횡비를 유지합니다. 예는 다음과 같습니다.

body {

배경-이미지 : url ( 'image.jpg');

배경-크기 : cover; 이렇게하면 이미지 커버가 만들어집니다. 웹 페이지의 전체 본체.

CSS에서 배경 이미지를 어떻게 배치 할 수 있습니까?

CSS의 '배경 위치'속성을 사용하면 배경을 배치 할 수 있습니다. 이미지. ‘상단’,‘하단’,‘왼쪽’,‘오른쪽’,‘센터’와 같은 키워드 측면에서 위치를 지정할 수 있습니다. 예는 다음과 같습니다.
body {
배경-이미지 : url ( 'image.jpg'); 배경-위치 : 오른쪽 상단; 이것은 이미지를 배치합니다. 신체의 오른쪽 상단 모서리에서.
CSS에서 배경 이미지를 어떻게 반복 할 수 있습니까?

CSS의 '배경 반복'속성을 통해 제어 할 수 있습니다. 배경 이미지의 반복. 값은‘반복’,‘반복 X’,‘반복 Y’또는‘반복 없음’일 수 있습니다. 예는 다음과 같습니다.

body {

배경-이미지 : url ( 'image.jpg');
배경 반복 : report-x; 이것은 반복됩니다. 신체를 가로 지르는 이미지.
CSS에서 여러 배경 이미지를 설정하려면 어떻게해야합니까?

CSS는 요소에 대한 여러 배경 이미지를 설정할 수 있습니다. 쉼표로 분리 된 '배경 이미지'속성에서 각 이미지를 지정합니다. 목록의 첫 번째 이미지는 최상위 레이어입니다. 예는 다음과 같습니다.
body {

배경-이미지 : url ( 'image1.jpg'), url ( 'im 신체의 경우.

CSS에서 배경 이미지를 수정하려면 어떻게해야합니까?

CSS의 '배경 상착'속성을 통해 배경을 만들 수 있습니다. 이미지가 수정되어 나머지 페이지로 스크롤하지 않습니다. 예는 다음과 같습니다.

body {
배경-이미지 : url ( 'image.jpg'); 배경 변환 : 고정; }
이것은 배경 이미지를 만듭니다. 고정. <.> CSS의 외부 URL에서 배경 이미지를 설정하려면 '배경 이미지'속성에서 URL을 지정하여 외부 URL에서 배경 이미지를 설정할 수 있습니다. 예는 다음과 같습니다.

body {

background-image : url ( 'https://example.com/image.jpg'); }

이것은 배경 이미지가 설정됩니다. 지정된 URL.
CSS의 배경 이미지에 대한 폴백 색상을 어떻게 설정할 수 있습니까?

배경 이미지에 대한 폴백 색상을 설정할 수 있습니다. '배경색'속성에서 색상을 지정합니다. 배경 이미지를로드 할 수없는 경우이 색상이 표시됩니다. 예는 다음과 같습니다.
body {
배경-이미지 : url ( 'image.jpg');

배경 색상 : #f00;

}

이것은 빨간색을 설정합니다. 배경 이미지의 폴백 색상.

CSS의 배경 색상과 배경 이미지를 어떻게 혼합 할 수 있습니까?

CSS의 '배경 블렌드 모드'속성 배경색 이미지를 배경색으로 혼합 할 수 있습니다. 예는 다음과 같습니다.
body {
배경 이미지 : url ( 'image.jpg');
배경 색상 : #f00;
배경-블렌드 모드 : 곱하기;

} 이것은 '곱하기'블렌드 모드를 사용하여 배경 이미지와 빨간색 배경 색상과 혼합됩니다.

특정 요소의 배경 이미지를 어떻게 설정할 수 있습니까? CSS?

'배경 이미지'속성 앞에 요소 선택기를 지정하여 특정 요소에 대한 배경 이미지를 설정할 수 있습니다. 예는 다음과 같습니다.

#MyElement { background-image : url ( 'image.jpg'); }
이것은 ID 'myelement와 함께 요소의 배경 이미지를 설정합니다. '.
CSS에서 의사 요소에 대한 배경 이미지를 어떻게 설정할 수 있습니까?
의사 요소에 대한 배경 이미지를 설정할 수 있습니다. '배경 이미지'속성 앞에 의사 요소 선택기를 지정함으로써. 예는 다음과 같습니다.
div :: 이전 { 컨텐츠 : "";
배경 이미지 : url ( 'image.jpg'); }
이것은 다음을 설정합니다. 'div'요소의 'pseudo element'이전의 배경 이미지.

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