CSS background-position 属性定位图片- CSS样式表

当前位置: 首页 > 图文教程 > 网页制作 > CSS样式表 > CSS background-position 属性定位图片

CSS样式表: css：之三行三列等高布局图文教程; 一些很不错的css技巧,但也常为人们所忽略; div+css布局必须要知道的css条件注释理论及实践; 超赞的随机颜色搭配工具; 应用WEB标准实例：列表页面的制作; 用CSS给图片打标的方法; 用css动态生成闪字的代码; 用滑动门技术设计按钮的图文教程; 如何实现多风格选择样式实时切换; 关于超链接的下划线使用说明; 用CSS给图片打标的代码; 学习样式表CSS参考-常用的CSS知识; XHTML下用dl,dt,dd标签实现翻页的效果代码; CSS网页布局入门教程1：一列固定宽度; CSS网页布局入门教程2：一列自适应宽度; CSS网页布局入门教程3：一列固定宽度居中; CSS网页布局入门教程4：二列固定宽度; CSS网页布局入门教程8：三列浮动中间列宽度自适应; DIV+CSS 英文命名规范; 发现四种在网页中使用CSS样式表的方法

No. « ‹ 86 87 88 89 › »

技术文章搜索

关键字

CSS样式表中的 CSS background-position 属性定位图片

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2010-01-10 浏览: 219 ::

收藏到网摘: n/a

外部引用CSS中 link与@import的区别 css 解决英文字符与阿位伯数字自动换行

今天无意中，看别人代码发现一个背景图中有很多图片

当时想这么多怎么就显示一个按钮的背景呢？百思不得其解，后来发现CSS 这样定义：

复制代码

代码如下:

.nav {
background:transparent url(images/y.gif) no-repeat scroll 0 0;
height:42px;
width:980px;
font-size:12px; list-style:none;
}
.nav ul{
padding-left:4px;
}
.nav li{position:relative;float:left;}
.nav .page_item a{
height:42px;
line-height:35px;
display:inline-block;
padding-right:13px;
color:#000000;
outline:none; /* for firefox 1.5 + */
hide-focus: expression(this.hideFocus=true); /* for ie 5+ */
}
.nav .page_item a span{
display:inline-block;
height:42px;
cursor:pointer;
padding:0px 0px 0px 12px;
}
.nav .page_item a:hover,.nav .current_page_item a{
background:url(images/x.gif) no-repeat right -90px;
}
.nav .page_item a:hover span, .nav .current_page_item a span{
color:#FFFFFF;
background:url(images/x.gif) no-repeat left -90px;
}

后来查看 background 定义，找到 background-position
定义和用法
background-position 属性设置背景图像的起始位置。
原来设置这个属性可以让图片显示某一位置 ,注意有两个值
第一个值是水平位置，第二个值是垂直位置。
左上角是 0% 0%。右下角是 100% 100%。
如果您仅规定了一个值，另一个值将是 50%。

以上CSS 效果图：

把位置变换一下在看效果：

复制代码

代码如下:

.nav {
background:transparent url(images/y.gif) no-repeat scroll 0 0;
height:42px;
width:980px;
font-size:12px; list-style:none;
}
.nav ul{
padding-left:4px;
}
.nav li{position:relative;float:left;}
.nav .page_item a{
height:42px;
line-height:35px;
display:inline-block;
padding-right:13px;
color:#000000;
outline:none; /* for firefox 1.5 + */
hide-focus: expression(this.hideFocus=true); /* for ie 5+ */
}
.nav .page_item a span{
display:inline-block;
height:42px;
cursor:pointer;
padding:0px 0px 0px 12px;
}
.nav .page_item a:hover,.nav .current_page_item a{
background:url(images/x.gif) no-repeat -30px -240px;
}
.nav .page_item a:hover span, .nav .current_page_item a span{
color:#FFFFFF;
background:url(images/x.gif) no-repeat left -240px;
}

页面代码：

复制代码

代码如下:

外部引用CSS中 link与@import的区别 css 解决英文字符与阿位伯数字自动换行

CSS样式表 中的 CSS background-position 属性 定位图片

评论 (0) All

CSS样式表中的 CSS background-position 属性定位图片