CSS 배경 및 스프라이트

이번에는 CSS 배경과 스프라이트를 가져왔습니다. CSS 배경과 스프라이트를 사용할 때 주의사항은 무엇인가요? 실제 사례를 살펴보겠습니다.

1. 라벨의 배경색을 설정하는 방법은 무엇인가요?

CSS에는 라벨의 배경색을 설정하는 데 특별히 사용되는 Background-color 속성이 있습니다.

2. 배경 이미지는 어떻게 설정하나요?

Background-image

단축키:

주소

일 수도 ​​있습니다. 2. 사진의 크기가 라벨의 크기보다 크지 않으면 자동으로 가로 및 세로로 타일링되어 채워집니다. it

3 배경 타일링 속성

에는 Background-repeat

값:

no-repeat는 가로 및 세로 모두 타일링이 필요하지 않습니다.

repeat-y 수직 방향으로만 타일

단축키

4. 배경 위치 속성

1. 배경 이미지 위치를 어떻게 제어하나요?

Background-position

2. 형식:

가로 방향: 왼쪽 가운데 오른쪽

3.2 특정 픽셀 예: background-position: 100px 200px;
단위를 써야 한다는 점, 즉 px를 써야 한다는 점을 기억하세요.

단축 키:

bp background-position: 0 0;

참고:

동일한 라벨은 배경색과 배경 이미지를 동시에 설정할 수 있습니다. 색상과 이미지가 동시에 존재하는 경우 이미지가 색상을 덮어씁니다

5. 배경 속성 약어

1. 배경 속성 약어 형식

배경: 배경색, 배경 이미지 타일링 방법, 연관 방법, 위치 지정 방법;

단축키:

bg+ 배경: #fff url() 0 0 no-repeat;

2. :

배경 속성에서는 어떤 속성이라도 생략 가능합니다

3. 배경 연결 방법이 무엇인가요?

기본적으로 배경 이미지는 스크롤 막대가 스크롤될 때 스크롤됩니다. 스크롤 막대가 스크롤될 때 배경 이미지가 스크롤되는 것을 원하지 않으면 배경 이미지와 스크롤 막대 사이의 관계를 수정할 수 있습니다

CSS에는 Background-attachment라는 속성이 있습니다. 이 속성은 특별히 연결 방법을 수정하는 데 사용됩니다.

Background-attachment: 스크롤; 기본값은 scroll입니다. , 스크롤바가 스크롤되는대로 스크롤

5. 배경 이미지와 삽입된 이미지의 차이점은?

1. 사진과 삽입된 사진의 차이점은 무엇인가요?

1.1

배경 사진은 장식일 뿐 공간을 차지하지 않습니다. (그 위에 다른 태그와 내용을 적을 수 있습니다.)사진을 삽입하면 공간을 차지합니다. (다른 태그를 쓸 수 없습니다.) 및 그 위에 있는 내용) )

이미지 삽입에는 위치 지정 속성이 없으므로 이미지의 위치 조절이 불편합니다.

1.3

6. 스프라이트

1. CSS 스프라이트란

CSS 스프라이트는 일종의 이미지 합성 기술입니다

2. CSS 스프라이트의 역할은 요청 수를 줄이고 서버 처리 부담을 줄일 수 있습니다

3. CSS 스프라이트

CSS 스프라이트는 배경 이미지 및 배경 위치 지정과 함께 사용해야 합니다.

.box1{
            width: 110px; //设置宽高
            height: 143px;
            background-position: -560px -216px; //设置xy
        }

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어의 다른 관련 기사에 주목하세요. 웹사이트!

추천 도서:

간과하기 쉬운 html5 팁

위 내용은 CSS 배경 및 스프라이트의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!