집 >웹 프론트엔드 >CSS 튜토리얼 >CSS 배경 및 스프라이트

CSS 배경 및 스프라이트

php中世界最好的语言원래의: 2018-03-13 10:37:342169검색

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

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

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

특정 단어 rgb rgba 16진수

단축키:

bc background-color: #fff;

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

Background-image

라는 속성이 있습니다: url() ; 배경 이미지를 설정하는 데 특별히 사용되는

단축키:

bi background-image: url()

참고:

1. . 이미지의 주소는 네트워크-

주소

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

3. 웹 페이지에 사진이 있으면 검색하세요. 서버는 이미지의 데이터를 얻기 위해 다시 요청을 보냅니다.

3 배경 타일링 속성

에는 Background-repeat

속성이 있습니다. 배경 이미지의 타일링 방법을 제어하는 데 특별히 사용되는 CSS에서

값:

repeat 기본적으로 타일링은 가로 및 세로 모두 필요합니다.

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

repeat-x 타일만 수평 방향으로

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

단축키

bgr background-repeat:

응용 시나리오:

배경 이미지를 타일링하여 이미지 크기를 줄이고 액세스 속도를 향상시킬 수 있습니다

4. 배경 위치 속성

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

CSS에는

Background-position

이라는 속성이 있는데, 이 속성은 특별히 웹 페이지의 위치를 제어하는 데 사용됩니다. 배경 이미지

2. 형식:

배경 위치: 가로 방향 세로 방향;

3.값

3.1 특정 위치 명사

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

세로 방향: 위쪽 가운데 아래쪽

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

특정 픽셀은 음수를 받을 수 있다는 점을 기억하세요

단축 키:

bp background-position: 0 0;

참고:

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

5. 배경 속성 약어

1. 배경 속성 약어 형식

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

단축키:

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

2. :

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

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

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

4. 배경 연결 방법을 어떻게 수정하나요?

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

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

고정되면 스크롤바가 스크롤되면서 스크롤되지 않습니다

단축키:

baBackground-attachment:;

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

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

1.1

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

1.2

배경 이미지에는 위치 지정 속성이 있어서 이미지의 위치 조절이 매우 편리합니다.

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

1.3

이미지 삽입의 의미가 배경 이미지의 의미보다 우수하므로 기업 개발 시 검색 엔진에서 사진을 색인화하려면 삽입된 사진을 사용하는 것이 좋습니다

6. 스프라이트

1. CSS 스프라이트란

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

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

3. CSS 스프라이트

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

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

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