집 > 기사 > 웹 프론트엔드 > 스프라이트 및 글꼴 아이콘의 CSS 구현

스프라이트 및 글꼴 아이콘의 CSS 구현

不言원래의: 2018-05-08 16:24:032241검색

이 글은 스프라이트와 폰트 아이콘을 구현하기 위한 CSS 관련 지식을 주로 소개하고 있어 매우 좋고 참고할만한 가치가 있습니다. 필요한 친구들은 참고하면 됩니다.

스프라이트:

과거에는 각각의 사진이 있습니다. 리소스 브라우저가 웹사이트의 다른 웹 페이지에 액세스할 때 이러한 사진을 반복적으로 얻으므로 리소스에 여러 번 액세스해야 합니다.

리소스 방문 횟수를 줄이기 위해 일반적으로 사용되는 여러 장의 사진을 하나의 사진으로 수집합니다(웹페이지의 캐싱 메커니즘은 기존 로컬 리소스를 생략합니다. 이전에 이 리소스를 얻은 경우 나중에 다시 액세스할 수 없습니다. 캐시된 리소스가 만료될 때까지. [놀이공원에 가는 것과 비슷합니다. 일부 티켓은 모든 게임을 플레이할 수 있지만 일부 티켓은 한 게임만 플레이할 수 있습니다. 번거롭게 티켓을 샀어요.])

자주 사용되는 여러 이미지를 하나의 이미지로 모은 후, 이 이미지를 배경 이미지로 설정하고, 배경 위치를 사용하여 이미지의 다른 부분을 표시합니다.

예:

다음은 26개의 알파벳입니다. 이 그림을 사용하여 GOOGLE

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style>
        p{
            display:inline-block;
        }
        p:first-child{
            width:79px;
            height: 79px;
            background-image:url(&#39;abcd.jpg&#39;);
            background-position:-396px 0;
        }
        p:nth-child(2){
            width:82px;
            height: 82px;
            background-image:url(&#39;abcd.jpg&#39;);
            background-position:-326px -98px;
        }
        p:nth-child(3){
            width:82px;
            height: 82px;
            background-image:url(&#39;abcd.jpg&#39;);
            background-position:-326px -98px;
        }
        p:nth-child(4){
            width:79px;
            height: 79px;
            background-image:url(&#39;abcd.jpg&#39;);
            background-position:-396px 0;
        }
        p:nth-child(5){
            width:48px;
            height: 77px;
            background-image:url(&#39;abcd.jpg&#39;);
            background-position:-81px -101px;
        }
        p:nth-child(6){
            width:48px;
            height: 77px;
            background-image:url(&#39;abcd.jpg&#39;);
            background-position:-286px 0;
        }

    </style>
</head>
<body>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
</body>
</html>

결과: