CSS3에서 배경 클립과 배경 원본을 구별하는 방법(코드 예)

이 장에서는 CSS3에서 background-clip과 background-origin을 구별하는 방법을 소개합니다. (코드 예). 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

CSS3에서 background-clip과 background-origin은 거의 동일한 기능을 갖고 있지만 약간의 미묘한 차이가 있습니다.

1. background-clip 속성

Background-clip : 배경이 순수일 때 그리기 영역을 지정합니다. 색상과 사진은 표시되는 방식이 다릅니다. 3가지 속성이 있습니다: border-box, padding-box, content-box.

1. border-box: 배경은 테두리에서 그려지지만 배경이 그림인 경우 왼쪽과 위쪽에는 그림이 없지만 아래쪽과 오른쪽에는 그림이 있습니다.

2. padding-box: 배경이 테두리 안에 그려집니다. #🎜 🎜#
3. 배경은 콘텐츠 부분에서 그려집니다.

# 🎜🎜#

2. background-origin 속성

#🎜🎜 # background-origin: 배경 이미지의 위치 지정 영역을 지정합니다. 해당 속성에는 border-box, padding-box도 포함되며, content-box에는 세 가지 속성이 있지만 설명은 "배경 그림"이라는 점에 유의해야 합니다. 이는 배경에서만 스타일 작업을 수행할 수 있음을 의미합니다. 그림이 그려지기 시작하는 영역을 지정하는 positon과 동일합니다. 즉, 그림의 왼쪽 상단 모서리만 지정할 수 있는 것과 같습니다. 🎜#Background-origin: 그림을 그릴 때 테두리부터 시작할 수 있지만 위의 두 번째 그림과 같이 일부 내용이 테두리에 가려질 수 있습니다

위 내용은 CSS3에서 배경 클립과 배경 원본을 구별하는 방법(코드 예)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!