Les pseudo-éléments CSS peuvent-ils redimensionner les images ?-tutoriel CSS-php.cn

Les pseudo-éléments CSS peuvent-ils redimensionner les images ?

Linda Hamilton

Libérer： 2024-12-04 08:13:15

original

514 Les gens l'ont consulté

Can CSS Pseudo-Elements Resize Images?

La modification de la hauteur de l'image peut-elle être réalisée dans les pseudo-éléments CSS (:before/:after) ?

Dans le but de personnaliser l'apparence de types de fichiers spécifiques, les développeurs peuvent incorporer des images comme éléments décoratifs. En attribuant une classe aux liens, telle que , CSS peut être utilisé pour afficher une image par la suite :

.pdflink:after { content: url('/images/pdf.png') }

Copier après la connexion

Bien que cette approche ajoute efficacement une image au lien , redimensionner l'image en fonction du texte du lien devient un défi. La possibilité de redimensionner les images au sein de pseudo-éléments est une question de longue date dans le développement Web.

La méthode traditionnelle de redimensionnement des images d'arrière-plan n'est pas applicable aux pseudo-éléments. Cependant, une certaine prise en charge du redimensionnement de l'image peut être obtenue via la propriété background-size :

.pdflink:after {
    background-image: url('/images/pdf.png');
    background-size: 10px 20px;
    display: inline-block;
    width: 10px; 
    height: 20px;
    content:"";
}

Copier après la connexion

Cette approche implique d'ajuster la taille de l'arrière-plan tout en définissant explicitement la largeur et la hauteur du bloc environnant. Il est important de noter que la compatibilité est limitée pour cette technique. Le tableau de compatibilité MDN fournit plus de détails sur la prise en charge du navigateur.

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!