CSS:background-position的妙用

2016-02-19 14:45 13 1 收藏

下面是个超简单的CSS:background-position的妙用教程,图老师小编精心挑选推荐,大家行行好,多给几个赞吧,小编吐血跪求~

【 tulaoshi.com - Web开发 】

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

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

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

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

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

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

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


来源:http://www.tulaoshi.com/n/20160219/1607838.html

延伸阅读
标签: Web开发
  原文:http://www.planabc.net/2008/04/14/background-clip_background-origin/ background-clip 和 background-origin 是 CSS3 中新加的 background module属性,用来确定背景的定位。 background-clip 用来判断 background 是否包含 border 区域。而 background-origin 用来决定 background-position 计算的参考位置。 语法为: ...
标签: Web开发
使用CSS来定位页面内层的位置,一直是比较难以掌握的事情,很多时候,往往被绝对定位的元素,总是以浏览器的左上角为坐标原点,此时,如果浏览器的大小改变,被定义的层就会偏离设计想要的位置,让人很挠头。 其实,要想控制好层的绝对定位,只要理解CSS中关于定位(position)的定义,一切就会变得轻松简单。 CSS中关于定位(p...
标签: Web开发
语法: background-attachment : scroll | fixed 取值: scroll : 默认值。背景图像是随对象内容滚动 fixed : 背景图像固定 说明: 设置或检索背景图像是随对象内容滚动还是固定的。 此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。 请参阅 bgProperties 属性(特性)。对应的脚本特性为 backgroundAtta...
标签: Web开发
语法: background-repeat : repeat | no-repeat | repeat-x | repeat-y 取值: repeat : 默认值。背景图像在纵向和横向上平铺 no-repeat : 背景图像不平铺 repeat-x : 背景图像仅在横向上平铺 repeat-y : 背景图像仅在纵向上平铺 说明: 设置或检索对象的背景图像是否及如何铺排。必须先指定对象的背景图像( background-...
标签: Web开发
语法: layer-background-color : transparent | color 取值: transparent : 默认值。背景色透明 color : 指定颜色。请参阅 颜色单位 和 附录:颜色表 说明: 设置或检索对象整个区域的背景颜色。 示例: div { layer-background-color: transparent;

经验教程

965

收藏

58
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部