CSS3 다중 배경 및 배경 이미지 자르기, 위치 지정 및 크기에 대한 자세한 설명

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;}

반복 없음을 설정하지 않으면 아래 이미지 리소스가 위의 이미지 리소스

사진 시작 위치배경을 덮어쓰게 됩니다. Origin

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/*改*/;}

.

---

contain은 해당 영역 내에서 이미지가 최대로 표시되도록 하기 위한 것입니다. 이 예에서는 높이가 채워집니다.

.demo {    width: 600px;    height: 200px;    border: 1px solid black;    background: url('1.png') no-repeat;    background-size: contain;}

아마도 CSS3 배경 이미지의 내용일 겁니다

위 내용은 CSS3 다중 배경 및 배경 이미지 자르기, 위치 지정 및 크기에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!