Maison interface Web tutoriel CSS Comment implémenter la technologie de découpe d'image via Sprites en CSS (code ci-joint)

Comment implémenter la technologie de découpe d'image via Sprites en CSS (code ci-joint)

Sep 11, 2018 pm 03:31 PM

Avantages et inconvénients des sprites CSS

Avantages

1 L'utilisation de sprites CSS peut ainsi réduire considérablement les requêtes http des pages Web. Améliorer considérablement les performances de la page est également le plus grand avantage des Sprites CSS et la principale raison pour laquelle ils sont largement répandus et appliqués
2. Les Sprites CSS peuvent réduire les octets des images et les ai fusionnées ; un. Les octets de l’image sont toujours plus petits que la somme des octets de ces trois images.
3. Cela résout le problème des concepteurs de sites Web dans la dénomination des images. Il n'est pas nécessaire de nommer chaque petit élément, améliorant ainsi l'efficacité de la production de pages Web.
4. Il est facile de changer le style. Il vous suffit de modifier la couleur ou le style d'une ou de quelques images, et le style de l'ensemble de la page Web peut être modifié. L'entretien est plus pratique.

Inconvénients

Il est vrai que les Sprites CSS sont si puissants, mais il y a aussi quelques défauts qui ne peuvent être ignorés, comme suit :
Lors de la fusion. images, vous devez fusionner plusieurs images en une seule image de manière ordonnée et raisonnable, et laisser suffisamment d'espace pour éviter que des arrière-plans inutiles n'apparaissent dans la section. C'est bien, mais le plus pénible est de le faire sur un écran large ; , écran haute résolution. Pour les pages adaptatives, si votre image n'est pas assez large, il est facile que l'arrière-plan se brise
2. Les sprites CSS sont plus gênants lors du développement. chaque unité d'arrière-plan via Photoshop ou d'autres outils. Ce travail d'aiguille n'est pas difficile, mais c'est très fastidieux, Gui Ge de Tencent a développé un outil de génération de style CSS Sprites en utilisant ADOBE AIR, bien qu'il soit encore quelque peu rigide dans son utilisation ; plus pratique que la mesure Photoshop, et le style Générer, copier et copier directement est OK !
3. Les sprites CSS sont plus difficiles à maintenir. Si l'arrière-plan de la page est légèrement modifié, vous devez généralement modifier l'image fusionnée, afin d'éviter de modifier. changer plus de CSS. Si l'emplacement d'origine ne peut pas tenir, et la seule option (de préférence) est d'ajouter l'image vers le bas, ce qui augmentera les octets de l'image et nécessitera des modifications du CSS.
4.Les sprites CSS valent vraiment la peine d'être appris et appliqués, surtout si la page contient un tas d'icos (icônes). En bref, nous devons souvent peser le pour et le contre avant de décider d’utiliser ou non des Sprites CSS.

Code HTML :

<body>
<!-- ul.sprite>li*5>s.s-icon+a{CSS Sprite} -->
<!-- 以上是Sublime Text快速拼写 -->
<ul class="sprite">
<li><s class="s-icon"></s><a href="">CSS Sprite</a></li>
<li><s class="s-icon"></s><a href="">CSS Sprite</a></li>
<li><s class="s-icon"></s><a href="">CSS Sprite</a></li>
<li><s class="s-icon"></s><a href="">CSS Sprite</a></li>
<li><s class="s-icon"></s><a href="">CSS Sprite</a></li>
<div class="clear"></div>
</ul>
</body>
Copier après la connexion

Code CSS :

<style>
body { background-color: #fc0; color:#333;}
* {margin:0; padding:0;}
ul,li {list-style: none;}
a { color:#f00; font-weight: bold; text-decoration: none;}
.sprite {margin:0 auto; width:1000px; padding-top: 50px;}
.sprite li {float:left; margin-left: 50px; text-align: center; cursor:pointer; }
.sprite li s { display: block; width:132px; height:112px; background:url(all.png) no-repeat; }
.clear { clear:both;}
</style>
Copier après la connexion

Code JS :

<script src="<a href="http://code.jquery.com/jquery-latest.js"></script">http://code.jquery.com/jquery-latest.js"></script</a>>
<script>
$(function () {
var iconH = $(".sprite").find("s").height(),
//找出存放图片的容器的高度;
triggerLi = $(".sprite").children("li");
//找出每一个li,放到一个数组中;
//console.log(iconH);
//在控制台打印出容器的高度;
triggerLi.each(function () {
//遍历数组中的每一个li
var $this = $(this),
//声明变量赋值当前的li;
$index = $this.index();
//声明变量保存当前li的index值;
//console.log($index);
//在控制台打印出每一个li的index值;
//console.log(iconH*$index);
//得出每一个图片对应的position值;
$this.children("s").css("background-position","0 -"+iconH*$index+"px");
//利用js遍历出每一个s标签的背景图片;
$this.hover(function() {
//鼠标移入
$this.children("s").css("background-position","-132px -"+iconH*$index+"px");
}, function() {
//鼠标移出
$this.children("s").css("background-position","0 -"+iconH*$index+"px");
});
})
})
</script>
Copier après la connexion

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!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article chaud

Repo: Comment relancer ses coéquipiers
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
1 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD

Article chaud

Repo: Comment relancer ses coéquipiers
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
1 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD

Tags d'article chaud

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Ajout d'ombres de boîte aux blocs et éléments WordPress Ajout d'ombres de boîte aux blocs et éléments WordPress Mar 09, 2025 pm 12:53 PM

Ajout d'ombres de boîte aux blocs et éléments WordPress

Créez un formulaire de contact JavaScript avec le cadre Smart Forms Créez un formulaire de contact JavaScript avec le cadre Smart Forms Mar 07, 2025 am 11:33 AM

Créez un formulaire de contact JavaScript avec le cadre Smart Forms

Travailler avec GraphQL Caching Travailler avec GraphQL Caching Mar 19, 2025 am 09:36 AM

Travailler avec GraphQL Caching

Faire votre première transition Svelte personnalisée Faire votre première transition Svelte personnalisée Mar 15, 2025 am 11:08 AM

Faire votre première transition Svelte personnalisée

Demystifier les lecteurs d'écran: formulaires accessibles et meilleures pratiques Demystifier les lecteurs d'écran: formulaires accessibles et meilleures pratiques Mar 08, 2025 am 09:45 AM

Demystifier les lecteurs d'écran: formulaires accessibles et meilleures pratiques

Comparaison des 5 meilleurs constructeurs de formulaires PHP (et 3 scripts libres) Comparaison des 5 meilleurs constructeurs de formulaires PHP (et 3 scripts libres) Mar 04, 2025 am 10:22 AM

Comparaison des 5 meilleurs constructeurs de formulaires PHP (et 3 scripts libres)

Show, ne dit pas Show, ne dit pas Mar 16, 2025 am 11:49 AM

Show, ne dit pas

Que diable sont les commandes NPM? Que diable sont les commandes NPM? Mar 15, 2025 am 11:36 AM

Que diable sont les commandes NPM?

See all articles