CSS3 이전에는 그림을 추가할 수 있었습니다.
CSS3에서는 하나의 요소에 여러 그림을 추가할 수 있었습니다.
<p class="demo"></p>
.demo { width: 600px; height: 200px; border: 1px solid black; background: url('1.png') no-repeat;}
여러 배경은 배경 속성 에 여러 이미지 리소스를 추가할 수 있으며, 쉼표
로 구분한 다음 배경 위치를 사용할 수 있습니다. 원하는 위치에 배치
.demo { width: 600px; height: 200px; border: 1px solid black; background: url('1.png') no-repeat, url('2.png') no-repeat 200px 0, url('3.png') no-repeat 400px 0;}
반복 없음을 설정하지 않으면 아래 이미지 리소스가 위의 이미지 리소스
background-origin을 사용하면 이미지가 배치되기 시작하는 위치를 정의할 수 있습니다
선택적 속성 값padding-box(기본값), border-box, content-box ;
padding-box 기본 이미지는 padding
이를 증명하기 위해 padding을 추가할 수 있습니다.
.demo { width: 600px; height: 200px; border: 20px solid gray/*改*/; padding: 20px/*增*/; background: url('1.png') no-repeat, url('2.png') no-repeat 200px 0, url('3.png') no-repeat 400px 0;}
[참고: 주석 은 CSS에서 사용할 수 없습니다. . 하이라이트 효과를 위해 이렇게 댓글을 다는군요.]
border-box는 경계선부터 이미지를 정의합니다.
.demo { width: 600px; height: 200px; border: 20px solid gray; padding: 20px; background: url('1.png') no-repeat, url('2.png') no-repeat 200px 0, url('3.png') no-repeat 400px 0; background-origin: border-box/*增*/;}
border-box로 수정하면 회색 배경색 하단에서 이미지의 일부가 가려지는 것을 확인할 수 있습니다
테두리가 실제로 요소 위에 있어야 한다고 이해할 수 있습니다
.demo { width: 600px; height: 200px; border: 20px solid gray; padding: 20px; background: url('1.png') no-repeat, url('2.png') no-repeat 200px 0, url('3.png') no-repeat 400px 0; background-origin: content-box/*改*/;}
content-box는 요소의 콘텐츠 부분에서 시작 위치를 정의합니다
시작 위치는 콘텐츠 영역
으로 설정되어 있지만 이것이 우리의 그림이 콘텐츠 영역으로 제한된다는 의미는 아닙니다
전체 요소 테두리 및 테두리 내에 그릴 수 있습니다
위의 코드는
.demo { width: 600px; height: 200px; border: 20px solid transparent/*改*/; padding: 20px; background: url('1.png') no-repeat, url('2.png') no-repeat 200px 0, url('3.png')/*删掉no-repeat 默认repeat*/ 400px 0; background-origin: content-box;}
이미지 표시 범위를 설정하는 방법이 있나요?
이것은 background-clip 속성
과 content-를 사용합니다. 원본 속성 padding-box(기본값), border-box, content-box 등 값은
과 유사합니다.
이미지 표시 범위를 잘린 것처럼 설정
.demo { width: 600px; height: 200px; border: 20px solid transparent; padding: 20px; background: url('1.png') no-repeat, url('2.png') no-repeat 200px 0, url('3.png') 400px 0; background-origin: content-box; background-clip: content-box/*增*/;}
이렇게 하면 이미지의 초과 부분이 표시되지 않습니다.
웹킷의 이미지 자르기 속성에도 텍스트라는 특수 속성 값이 있습니다.
, 이는 배경 이미지가 텍스트
로 제한됨을 의미합니다. 텍스트 채우기 색상과 결합하여 독특한 마스크 텍스트 효과를 형성할 수 있습니다.
<p class="demo">某科学的超电磁炮</p> <--添加内容
.demo { width: 600px; height: 200px; border: 20px solid transparent; padding: 20px; background: url('1.png') no-repeat, url('2.png') no-repeat 200px 0, url('3.png') 400px 0; background-origin: content-box; -webkit-background-clip: text;/*增*/ -webkit-text-fill-color: transparent;/*增*/ font: 75px/200px bold;/*增*/}
배경 크기 속성을 사용하면 사진 크기를 제어할 수 있습니다
예를 들어 2픽셀을 씁니다. 너비와 높이를 조절하는 값
.demo {/*新*/ width: 600px; height: 200px; border: 1px solid black; background: url('1.png') no-repeat; background-size: 180px 140px;}
1픽셀 쓰기 값은 너비와 높이가 픽셀 단위로 같다는 뜻
물론 1픽셀로도 쓸 수 있다 백분율 형식
덮어 전체 영역을 덮습니다
.demo { width: 600px; height: 200px; border: 1px solid black; background: url('1.png') no-repeat; background-size: cover/*改*/;}
.
.demo { width: 600px; height: 200px; border: 1px solid black; background: url('1.png') no-repeat; background-size: contain;}
위 내용은 CSS3 다중 배경 및 배경 이미지 자르기, 위치 지정 및 크기에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!