CSS를 사용하여 png에서 작은 아이콘을 캡처하는 방법

PNG에서 작은 아이콘을 가로채는 Css 방법: 먼저 배경 속성을 사용하여 png 이미지를 도입하고 no-repeat 속성 값을 사용하여 이미지를 반복되지 않도록 설정한 다음 background-position 속성을 사용하여 초기 설정을 설정합니다. 정확한 위치 지정을 위해 이미지 위치를 지정합니다.

이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

css file

.icon
{
    background: url(icon.png) no-repeat; /*url为png图片的路径*/
    /*width和line-height分别对应每个小图标的宽和高*/
    width: 20px;    
    line-height: :20px;
    display: inline-block;
}
.icon-small
{   /*png图片左上角为原点,往右往下均为负值*/
    background-position: -150px 0px;/*对应小图标的坐标*/
}

html file

<!-- 联想一下Bootstrap 字体图标(Glyphicons) 
    <span class="glyphicon glyphicon-search"></span>
-->
<div class="icon icon-small"></div>

왜 한 페이지 또는 여러 페이지의 배경 이미지가 하나의 이미지로 통합되나요?

웹 사이트를 방문하면 웹 사이트에 HTTP 요청을 합니다. 열기 속도, 처리, 페이지 크기, 사진 크기, 네트워크 속도 등과 같은 여러 요소 외에도 또 다른 중요한 요소는 HTTP 요청 수입니다. HTTP 요청이 많을수록 웹 사이트가 느리게 열립니다. HTTP 요청이 있을 경우 페이지 열기 속도로 인해 발생하는 지연은 약 0.01초입니다. 요청이 많으면 페이지에 많은 지연이 발생하고 당연히 액세스 속도도 느려집니다.

모든 배경 이미지를 하나의 이미지로 통합하면 단 하나의 HTTP 요청만 서버로 전송되므로 요청 수가 크게 줄어들고 지연도 적습니다. 그런 다음 CSS의 background-image 및 background-position 속성을 사용하여 필요한 배경 이미지를 구현하고 페이지에서 요구하는 표현을 달성하도록 위치를 지정합니다.

추천 학습: css 비디오 튜토리얼

위 내용은 CSS를 사용하여 png에서 작은 아이콘을 캡처하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!