CSS3 튜토리얼(5): 웹페이지 배경 이미지_css3_CSS_웹페이지 제작

웹페이지 제작에 대한 Webjx 기사 소개: 배경 이미지/질감은 다양한 방법으로 사용될 수 있으며, 웹사이트에 가장 좋은 최종 미화를 추가하는 데 자주 사용됩니다. 이제 CSS3에서는 이 기능이 중요하게 다루어지기 때문에 여러 배경 이미지와 배경 이미지 크기를 적용하여 보다 완벽한 효과를 얻을 수 있습니다. 배경 이미지/질감은 다양한 방법으로 사용될 수 있으며 웹사이트에 최고의 최종 미화를 추가하는 데 자주 사용됩니다. 이제 CSS3에서는 이 기능이 중요하게 다루어지기 때문에 여러 배경 이미지와 배경 이미지 크기를 적용하여 보다 완벽한 효과를 얻을 수 있습니다.

배경 이미지/질감은 다양한 방법으로 사용될 수 있으며 웹사이트에 최고의 최종 미화를 추가하는 데 자주 사용됩니다. 이제 CSS3에서는 이 기능이 중요하게 다루어지기 때문에 여러 배경 이미지와 배경 이미지 크기를 적용하여 보다 완벽한 효과를 얻을 수 있습니다.

이전 기사: CSS3 튜토리얼(4): 웹 페이지 테두리 및 웹 페이지 텍스트 그림자
CSS3의 배경 이미지 크기는 background-size:Apx Bpx;
-Apx = x-로 작성할 수 있습니다. axis(이미지 너비)
-Bpx = y축(그림 높이)
이것을 이해하고 이 기능을 경험해 보겠습니다.
CSS3 배경 크기를 지원하는 최고의 브라우저는 Safari와 Opera이므로 우리는 -o 및 -webkit 접두사를 사용해야 합니다. 배경 크기

#BackgroundSize{ border: 5px solid #bd9ec4; background:url(image_1.extension) 오른쪽 하단 no-repeat; ; -webkit-배경-크기: 150px 250px; 높이: 상속; 너비: 590px; } 브라우저 지원:

Firefox(3.05…)

(1.0.154…)

Google Chrome(2.0.156…)

Internet Explorer(IE7, IE8 RC1)

Opera(9.6…)

Safari(3.2.1 windows…)

CSS3에서는 여러 배경 이미지를 적용하기 위해 다음과 같이 손쉬운 분리를 사용합니다.

background: url(image_1.extension) top right no-repeat, url( image_2 .extention) 오른쪽 하단 반복 없음;

#BackgroundMultiple{ border: 5px solid #9e9aab background:url(image_1.extention) 왼쪽 상단 반복 없음, url ( image_2.extention) 왼쪽 하단 반복 없음, url(image_3.extention) 오른쪽 하단 반복 없음; 높이: 상속; 너비: 590px } 브라우저 지원:

3.05…)

Google Chrome(1.0.154…)

Google Chrome(2.0.156…)

Internet Explorer(IE7, IE8 RC1)

Opera(9.6…)

Safari(3.2.1 windows…)

위 CSS3 튜토리얼 내용입니다(5): 웹 페이지 배경 image_css3_CSS_ 웹 페이지 제작, 기타 관련 사항은 결제해주세요 내용은 PHP 중국어 웹사이트(www.php.cn)에 주목하세요!