CSS Sprites技术 zt十天学会web标准(div+css)_html/css_WEB-ITnose

WBOY
풀어 주다: 2016-06-24 12:29:04
원래의
1275명이 탐색했습니다.

CSS Sprites在国内很多人叫css精灵或css雪碧。它是把网页中一些背景图片整合到一张图片文件中,再利用CSS的背景图片定位到要显示的位置。这样做可以减少文件体积,减少对服务器的请求次数,提高效率。

讲CSS Sprites之前,先把背景图片给搞清楚

#menu ul li a { background:#ccc url(images/nav_bg2.gif) 0 0 no-repeat; }

css背景属性缩写后如上所示,#ccc表示背景色;url()里是背景图片路径;接下来的两个数值参数分别是左右和上下,第一个参数表示距左多少px,第二个参数表示距上多少,这和padding的简写方式是不 一样,一定不要弄混。另外再强调一点css中值为0可以不带单位,其它数值都必须带单位(line-height值为多少倍时,zoom,z-index除外);no-repeat表示背景图片向哪个方向重复,此时为不重复。

还需说明一点的是定位图片位置的参数是以图片的左上角为原点的,理解了这些,CSS Sprites技术就基本上懂了

 

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!