Comment capturer de petites icônes à partir de png avec CSS

Méthode CSS pour intercepter les petites icônes de png : utilisez d'abord l'attribut background pour introduire l'image png, utilisez la valeur de l'attribut no-repeat pour définir l'image comme non répétitive, puis utilisez l'attribut background-position ; pour définir la position initiale de l’image pour un positionnement précis.

L'environnement d'exploitation de ce tutoriel : système Windows 7, version CSS3&&HTML5, ordinateur Dell G3.

fichier css

.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;/*对应小图标的坐标*/
}

fichier html

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

Pourquoi les images d'arrière-plan d'une page ou de plusieurs pages sont-elles intégrées dans une seule image ?

Lorsque nous visitons un site Web, nous ferons une requête HTTP au serveur En plus de facteurs tels que la vitesse d'ouverture du site Web, la taille du traitement et de la page, la taille de l'image, la vitesse du réseau, etc., un autre facteur important est le. Numéro de requête HTTP. Plus il y a de requêtes HTTP, plus le site Web s'ouvrira lentement. Lorsqu'une requête HTTP est adressée au serveur, le délai causé par la vitesse d'ouverture de la page est d'environ 0,01 seconde. Une connexion ou une image fera une requête au serveur. Si HTTP Trop de requêtes entraîneront beaucoup de retards sur la page et la vitesse d'accès sera naturellement lente.

Si toutes les images d'arrière-plan sont intégrées dans une seule image, une seule requête HTTP sera envoyée au serveur, le nombre de requêtes sera considérablement réduit et le délai sera faible. Utilisez ensuite les propriétés background-image et background-position de CSS pour réaliser l'image d'arrière-plan requise et positionnez-la pour obtenir l'effet d'expression souhaité de la page.

Apprentissage recommandé : Tutoriel vidéo CSS

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!