定义和用法
background-position 属性设置背景图像的起始位置。
这个属性设置背景原图像(由 background-image 定义)的位置,背景图像如果要重复,将从这一点开始。
提示:您需要把 background-attachment 属性设置为 "fixed",才能保证该属性在 Firefox 和 Opera 中正常工作。
默认值:
0% 0% |
继承性:
no |
版本:
CSS1 |
JavaScript 语法:
object.style.backgroundPosition="center" |
实例
如何定位背景图像:
body
{
background-image:url('bgimage.gif');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
}
TIY
浏览器支持
所有浏览器都支持 background-position 属性。
注释:任何版本的 Internet Explorer (包括 IE8)都不支持属性值 "inherit"。
可能的值
值
描述
- top left
- top center
- top right
- center left
- center center
- center right
- bottom left
- bottom center
- bottom right
|
如果您仅规定了一个关键词,那么第二个值将是"center"。
默认值:0% 0%。
|
x% y% |
第一个值是水平位置,第二个值是垂直位置。
左上角是 0% 0%。右下角是 100% 100%。
如果您仅规定了一个值,另一个值将是 50%。
|
xpos ypos |
第一个值是水平位置,第二个值是垂直位置。
左上角是 0 0。单位是像素 (0px 0px) 或任何其他的 CSS 单位。
如果您仅规定了一个值,另一个值将是50%。
您可以混合使用 % 和 position 值。
|
分享到:
相关推荐
批量输出 CSS background-position 属性的定位像素值
或者,可以使用 background-position 属性,分別设置背景图片的水平和垂直位置。 例如: ;height:300px;background-image:url(http://www.dnew.cn/template/4color/images/green.png);background-position:100 50...
最近在项目中需要大量的用到很多标签按钮什么的零碎图片,加上一直没机会使用Css中的”精灵技术“,这里把我对background-position的理解写成文档供更多人使用学习;如果有不对的请大家使劲拍
background-position的说明: 设置或检索对象的背景图像位置。必须先指定 background-image 属性。该属性定位不受对象的补丁属性( padding )设置影响。 默认值为: 0% 0% 。此时背景图片将被定位于对象不包括补丁( ...
background-position鱼游动特效是一款基于css3 animation transform属性制作两条游动的鲨鱼动画特效。
复制代码代码如下: .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:...
这篇文章将会涉及css背景(background)的基本用法,包括诸如 background-attachment 等的属性,也会介绍一些有关背景(background)的常用技巧,以及 css3 中的 背景(background)(包含4个新的背景(background)属性)。...
css background-position背景定位属性想必从事前端开发的朋友并不陌生吧,这个属性很实用的利用它可以实现很多的图片样式效果,下面是其具体的使用方法,感兴趣的朋友不要错过
我们也可以使用background-position属性来实现背景图片的平铺。background-position属性可以设置背景图片的位置,我们可以使用repeat-x或repeat-y来实现背景图片的平铺。 例如: ```css body { background: url...
;单元2-3 字体、文本、背景属性;;;;;;;;;...字体属性 ...文本属性 ...背景属性 background background-color background-image backeground-position background-repeat backeground-size background-origin;
CSS实现方式,主要也是两种方式,其实就是想一下有哪些属性可以无限叠加,一个是box-shadow,还有一个是background-image。这里主要通过background-size和background-position来控制原点的尺寸与位置,看着好像挺...
CSS实现方式,主要也是两种方式,其实就是想一下有哪些属性可以无限叠加,一个是box-shadow,还有一个是background-image。这里主要通过background-size和background-position来控制原点的尺寸与位置,看着好像挺...
background background-attachment background-color background-image background-position background-positionX background-positionY background-repeat layer-background-color layer-background-image ...
复合属性:background:background-color background-image background -repeat background-position background-attachment CSS3新增:不能用background的复合属性 background-size,background-ori
background 简写属性,作用是将背景属性设置在一个声明中。 background-attachment 背景图像是否固定或者随着页面的其余部分滚动。Scroll随文滚动 background-color 设置元素的背景颜色。 background-image 把...
* `background-position`: 设置背景图片位置,例如 `background-position: 90% 90%;`、`background-position: top;`、`background-position: bottom;`、`background-position: left;`、`background-position: right;...