files/pt-br/web/css/css_images/implementing_image_sprites_in_css/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

---
title: Implementando sprites de imagens em CSS
slug: Web/CSS/CSS_Images/Implementing_image_sprites_in_CSS
translation_of: Web/CSS/CSS_Images/Implementing_image_sprites_in_CSS
original_slug: Web/CSS/CSS_Images/Implementando_sprites_de_imagens_em_CSS
---
<div>{{cssRef}}</div>

<p><strong>Sprites de imagens</strong> são utilizados em diversas aplicações web onde várias imagens são usadas. Ao invés de incluir cada arquivo de imagem separadamente, é mais amigável com a memória e largura de banda enviar tudo como uma única imagem, diminuindo o número de pedidos em HTTP.</p>

<div class="note">
<p><strong>Nota:</strong> Quando usando HTTP/2, é mais amigável com a largura de banda usar vários pequenos pedidos.</p>
</div>

<h2 id="Implementação">Implementação</h2>

<p>Suponha que uma imagem é dada a cada item com a classe <code>toolbtn</code>:</p>

<pre class="brush:css">.toolbtn {
  background: url(myfile.png);
  display: inline-block;
  height: 20px;
  width: 20px;
}</pre>

<p>A posição do plano de fundo pode ser adicionada tanto com dois valores x, y depois de {{cssxref("url()")}} em background , ou como {{cssxref("background-position")}} . Por exemplo:</p>

<pre class="brush:css">#btn1 {
  background-position: -20px 0px;
}

#btn2 {
  background-position: -40px 0px;
}</pre>

<p>Isso vai mover o elemento com a ID 'btn1' 20 pixels para a esquerda e o elemento com a ID 'btn2' 40 pixels para a esquerda (presumindo que ambos tem a classe <code>toolbtn</code> atribuída e estão sendo afetados pela regra da imagem acima).</p>

<p>De forma similar, você pode criar um efeito de hover com:</p>

<pre class="brush:css">#btn:hover {
  background-position: <var>&lt;pixels para direita&gt;</var>px <var>&lt;pixels para baixo&gt;</var>px;
}</pre>

<h2 id="Veja_também">Veja também</h2>

<ul>
 <li><a href="http://css-tricks.com/snippets/css/perfect-css-sprite-sliding-doors-button/">Demo completa em CSS Tricks</a></li>
</ul>