当前位置：Gxlcms > html代码 > CSSSprite雪碧图制作

CSSSprite雪碧图制作

时间：2021-07-01 10:21:17 帮助过：10人阅读

CSS Sprite 雪碧图，简单来说就是：

为了提高网页的性能，减少加载次数，将一些不会经常随网站内容变化的小图标，集中放在一张大图上，将该图应作为background-image 嵌入页面中，在需要相关图标时，根据background-position设置坐标值，达到目的。

一个例子，可以复制然后看一下效果：

HTML代码：

<span style="color: #0000ff;"><!--</span--><span sty="" <="" div="">
                  
 
                    <div class="">
                        <ul class="m-news-opt fix">
                            <li class="opt-item">
                                <a href="/htmldaima-263565.html" target="_blank"><p>< 上一篇</p><p class="ellipsis">jsp页面在IE8下文本模式自动为“杂项（Quirks）”导致页面显示错位</p></a>
                            </li>
                            <li class="opt-item ta-r">
                                 <a href="/htmldaima-263567.html" target="_blank"><p>下一篇 ></p><p class="ellipsis">网站的引导页介绍</p></a>
                            </li>
                        </ul>
                    </div>
                    
                    
                    
                    
                </span></span>

CSSSprite雪碧图制作

人气教程排行