定义和用法
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`属性的定位像素值通常是...
在CSS世界中,`background-position`是一个至关重要的属性,它允许我们精确地控制背景图像在元素内的位置。这个属性在网页设计中广泛应用,用于创建各种视觉效果,如图像滑动、定位图标等。本篇文章将深入探讨`...
`background-position`属性是实现这一目标的关键,它允许我们通过坐标系统来调整背景图像相对于元素的位置。下面我们将详细探讨`background-position`的用法及其背后的算法。 首先,`background-position`属性可以...
最后,文章可能会提醒开发者,`background-position`与`background-size`、`background-repeat`、`background-origin`和`background-clip`等属性结合使用时,能创造出更多复杂的背景图像效果。这些属性的组合使用...
background-position 属性也可以使用关键字,如 left、right、center、top、bottom 等。例如,background-position: left top;,表示背景图片的水平位置在左侧,垂直位置在顶部。 实例 下面是一个使用 background-...
或者,可以使用 background-position 属性,分別设置背景图片的水平和垂直位置。 例如: ;height:300px;background-image:url(http://www.dnew.cn/template/4color/images/green.png);background-position:100 50...
下面是几个使用background-position属性的具体例子: 1. background-position: left top; 背景图片的左上角和容器的左上角对齐,超出的部分隐藏,相当于background-position: 0, 0或者background-position: 0% 0%。...
本文将深入探讨如何使用`background-image`属性来实现多张背景图片的设置,并介绍CSS3中的背景渐变。 首先,我们来看一下`background-image`属性的基本语法。它接受一个或多个 `<bg-image>` 值,每个值可以是 `none...
最近在项目中需要大量的用到很多标签按钮什么的零碎图片,加上一直没机会使用Css中的”精灵技术“,这里把我对background-position的理解写成文档供更多人使用学习;如果有不对的请大家使劲拍
在CSS中,我们使用`background`属性或者其子属性(如`background-image`、`background-size`、`background-position`、`background-repeat`)来设置背景视频。其中,`background-size`用于控制视频的大小,`...
通过`background-position`属性,我们可以精确控制这些图像在元素内的位置,从而实现鱼游动的效果。在`说明.htm`和`说明.txt`中,可能详细介绍了如何使用和定制这个特效,包括代码解释、示例和注意事项。 总结来说...
主要的背景属性包括`background-color`、`background-image`、`background-position`、`background-repeat`和`background-attachment`,这些属性可以通过合并使用缩写属性`background`来一次性设定。 1. **背景颜色...
以下内容将详细阐述如何使用CSS中的background-position属性来精确控制背景图片的显示位置,以及相关的知识点。 首先,需要理解背景图片定位的基本概念。在一个网页元素上设置背景图片时,如果图片的尺寸小于元素的...
`background-repeat`通常与`background-image`、`background-position`和`background-size`属性一起使用,以实现更精细的背景控制。例如,可以调整`background-position`来改变图像在背景中的初始位置,或者通过`...