css sprit css

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了css sprit css相关的知识,希望对你有一定的参考价值。

/*	html code	*/
<ul class="icone">
	<li class="icone-1"></li>
	<li class="icone-2"></li>
	<li class="icone-3"></li>
	<li class="icone-4"></li>
	<li class="icone-5"></li>
	<li class="icone-6"></li>
</ul>

/* css code	*/
.icone li {
	width: 60px;
	height: 60px;
	display: inline-block;
	background: url("sprite.png") no-repeat;
}

.icone .icone-1 { background-position: left top; }
.icone .icone-2 { background-position: 20% top; }
.icone .icone-3 { background-position: 40% top; }
.icone .icone-4 { background-position: 60% top; }
.icone .icone-5 { background-position: 80% top; }
.icone .icone-6 { background-position: right top; }

以上是关于css sprit css的主要内容,如果未能解决你的问题,请参考以下文章

Web前端HTML5&CSS314-雪碧图与渐变

jquery:厌倦了 css().css().css()

如何在CSS中调用公用css

css [css:fadeout / fadein] css示例。 #css

css基础 CSS 组合选择符CSS 伪类CSS 伪元素

css 深度提示#css中的css base builder CSS