CSS3의 새로운 배경 속성은 무엇입니까?

css3에는 세 가지 새로운 배경 속성이 추가되었습니다. 1. 개체의 배경 이미지가 바깥쪽으로 잘리는 영역을 지정하는 background-clip 2. 배경 이미지가 표시되기 시작하는 위치를 지정하는 background-origin; 3. 배경 이미지 크기를 지정하는 background-size.

이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

css3 새로운 배경 속성

Property	Description	CSS
Background-clip	객체의 배경 이미지가 바깥쪽으로 잘리는 영역을 지정합니다.	3
background-origin	배경 위치 계산 시 객체의 배경 이미지의 기준 원점(위치)을 설정하거나 검색합니다.	3
background-size	개체의 배경 이미지 크기를 검색하거나 설정합니다.	3

1. 배경 이미지의 크기를 지정합니다.

CSS3 이전에는 배경 이미지의 크기가 이미지의 실제 크기에 따라 결정되었습니다. CSS3에서는 배경 이미지의 크기를 지정할 수 있어 다양한 환경에서 배경 이미지를 재사용할 수 있습니다. 크기를 픽셀이나 백분율로 지정할 수 있습니다. 크기가 백분율로 지정된 경우 크기는 상위 요소의 너비와 높이를 기준으로 합니다.

div{
background:url(img_flwr.gif);
background-size:80px 60px;
background-repeat:no-repeat;
}

2. background-origin: 배경 이미지 표시를 시작할 위치를 지정합니다.

배경 이미지는 콘텐츠 상자, 패딩 상자 또는 테두리 상자 영역에 배치할 수 있습니다.

div{
background-image:url('smiley.gif');
background-repeat:no-repeat;
background-position:left;
background-origin:content-box;
}

3. background-clip: 배경 이미지 자르기 시작 위치 지정

div{
background-color:yellow;
background-clip:content-box;
}

(동영상 공유 학습: css 동영상 튜토리얼, 웹 프론트엔드 입문 튜토리얼)

위 내용은 CSS3의 새로운 배경 속성은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!