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

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

yulia

Libérer： 2018-09-11 15:31:34

original

1756 Les gens l'ont consulté

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!