欢迎访问搞代码网站，推荐使用最新版火狐浏览器和Chrome浏览器访问本网站！
如果您觉得本站非常有看点，那么赶紧使用Ctrl+D 收藏搞代码吧

> 前端 > css > CSS：background-position的妙用_css

CSS：background-position的妙用_css

css 搞代码 7年前 (2018-06-10) 201次浏览已收录 0个评论

css2.0 中的 background-position 大家用到过吗？怎么用的？用在哪里？js控制图片切换有两个缺陷：1.有时后切换缓慢,需要预载解决；2.要制作2-3套图片

　　看看怎么用 background-position 解决这个问题，实现快速”切换”，这里只用到一张图片

　　至于代码中的font:10px/1也是不常见的用法

　　可以参考这里:http://www.w3.org/Style/CSS/Test/CSS1/current/sec5526c.htm

　　这种用法放在网站地图或者导航条上的效果：

<style type=”text/css”>#menu a {display:block;width:150px;margin:6px; padding:10px 0 10px 32px;font:10px/1 sans-serif;color:#f90;background: url(“<a href="http://nb001722.sosoo.net/btn.gif&#8221" rel="nofollow">http://nb001722.sosoo.net/btn.gif&#8221</a><img src="https://www.gaodaima.com/wp-content/themes/Git-alpha/assets/img/smilies/icon_wink.gif" alt=";)" class="wp-smiley" style="height: 1em; max-height: 1em;" /> top left no-repeat;text-decoration: none;}#menu a:hover {background-position: 0 -39px;color:red;}#menu a:active {background: url(“<a href="http://nb001722.sosoo.net/btn.gif&#8221" rel="nofollow">http://nb001722.sosoo.net/btn.gif&#8221</a><img src="https://www.gaodaima.com/wp-content/themes/Git-alpha/assets/img/smilies/icon_wink.gif" alt=";)" class="wp-smiley" style="height: 1em; max-height: 1em;" /> 0 -78px no-repeat;color:black;}</style></head><body><div id=”menu”><a href=”###”>Menu link 1</a><a href=”###”>Menu link 2</a><a href=”###”>Menu link 3</a><a href=”###”>Menu link 4</a><a href=”###”>Menu link 5</a></div><script language=”<a href="https://www.gaodaima.com/go.html?url=http://www.gaodaima.com/tag/javascript" title="JavaScript" rel="nofollow" target="_blank">JavaScript</a>“> var now = new Date(); document.write(“<img src=’<a href="https://www.gaodaima.com/go.html?url=http://counter.yesky.com/counter.s" rel="nofollow">http://counter.yesky.com/counter.s</a><a href="https://www.gaodaima.com/go.html?url=http://www.gaodaima.com/tag/html" title="html" rel="nofollow" target="_blank">html</a>?CID=54197&AID=-1&refer=”+escape(document.referrer)+”&rand=”+ now.getTime() + “&cur=”+escape(document.URL)+”‘ border=’0′ alt=” width=’0′ height=’0’>”); </script> <noscript> <img src=”<a href="https://www.gaodaima.com/go.html?url=http://counter.yesky.com/counter.s" rel="nofollow">http://counter.yesky.com/counter.s</a><a href="https://www.gaodaima.com/tag/html" title="查看更多关于html的文章" target="_blank">html</a>?CID=54197&AID=-1&refer=noscriptcounter&cur=noscriptcounter” border=’0′ width=’0′ height=’0’/> </noscript>

欢迎大家阅读《CSS：background-position的妙用_css》,跪求各位点评,若觉得好的话请收藏本文，by 搞代码

搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]‍，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：CSS：background-position的妙用_css

版权声明
本站的文章和资源来自互联网或者站长
的原创，按照 CC BY -NC -SA 3.0 CN
协议发布和共享，转载或引用本站文章
应遵循相同协议。如果有侵犯版权的资
源请尽快联系站长，我们会在24h内删
除有争议的资源。
网站驱动
- 部署在阿里云
- 由七牛云储存提供 CDN 加速
友情链接
- 搞代码
- 宝塔镇河妖
强烈推荐
- 腾讯云
- 二三四五