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 중국어 웹사이트의 기타 관련 기사를 참조하세요!