CSS 배경 이미지를 타일링하는 방법은 무엇입니까?

과거에는 웹페이지 레이아웃을 할 때 하나의 div가 하나의 배경 이미지만 설정할 수 있었습니다. 여러 배경을 설정한 경우 더 나은 호환성을 위해 여러 div를 중첩해야 합니다. 웹 사이트가 낮은 브라우저 버전과의 호환성을 요구하는 경우 이 방법을 사용하는 것이 좋습니다. CSS3의 출현으로 div가 하나의 배경만 설정할 수 있다는 문제가 해결되어 div가 여러 배경 이미지를 설정할 수 있게 되었습니다. 배경 이미지선형 그래디언트 및 기타 효과를 설정할 수도 있습니다.

CSS3의 배경은 매우 강력하며 Background-size 등과 같은 많은 속성을 가지고 있습니다. 이러한 속성에 대한 블로그를 작성할 수 있습니다. CSS3Background의 다른 속성에 대해서는 나중에 별도로 블로그에 올리겠습니다!

CSS3/CSS1 배경 이미지 속성

구문:

background-image：<bg-image> [ , <bg-image> ]
*<bg-image> = none | <url> | <linear-gradient> | <radial-gradient> | <repeating-linear-gradient> | <repeating-radial-gradient>

기본값: 없음

값:

none: 배경 이미지가 없습니다.

< url >: 절대 또는 상대 주소를 사용하여 배경 이미지를 지정합니다.

: 선형 그라데이션을 사용하여 배경 이미지를 만듭니다. (CSS3)

<방사형-그라디언트>: 방사형(방사형) 그라데이션을 사용하여 배경 이미지를 만듭니다. (CSS3)

<반복-선형-그라디언트>: 반복 선형 그라디언트를 사용하여 배경 이미지를 만듭니다. (CSS3)

< 반복-방사형-그라디언트>: 반복되는 방사형(방사형) 그라디언트를 사용하여 배경 이미지를 만듭니다. (CSS3)

설명:

개체 의 배경 이미지를 설정하거나 검색합니다.

배경 이미지가 설정된 경우, 배경 이미지가 보이지 않을 때 텍스트와 일정한 대비를 유지하기 위해 작성자가 배경색을 설정하는 것도 권장됩니다.

해당 스크립트 기능은 backgroundImage입니다.

CSS에서 배경 이미지를 늘려 화면을 채우는 방법

제가 작성한 CSS 코드는

#bg
{
width: 100%;
height: 100%;
background:url(images/beijing.png);
}

이런 식으로 이미지를 반복하여 화면을 채우도록 하겠습니다. 화면. 모직물은 어떻게 써야 하나요?

background:url(images/beijing.png) repeat;

속성 추가

background-size:100%;background:url(images/beijing.png) no-repeat;

속성 추가 background-size:100%; background:url(images/beijing.png) no-repeat;

외부 프레임이 제한되어 있거나 100%로 설정했습니다. 여기에서 테스트해 보았는데 영향을 미치는 다른 속성이 있는지 확인할 수 있습니다.

위 내용은 CSS 배경 이미지를 타일링하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!