http://www.w3school.com.cn/css/pr_background-position.asp
定义和用法
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 值。
|
例:
.bg{
background-image:url(icons.png) ;
background-position:0px -110px;
height:20px;
width:20px;
background-repeat:no-repeat;
}
分享到:
相关推荐
在CSS中,`background-position`属性是一个非常重要的部分,它控制着背景图像在元素内的位置。这个属性允许我们精确地定位背景图像,从而实现各种视觉效果。 批量输出`background-position`属性的定位像素值通常是...
CSS中背景background-position负值定位 CSS中背景background-position负值定位 CSS中背景background-position负值定位 CSS中背景background-position负值定位 CSS中背景background-position负值定位
CSS background-position 属性定位图片 在 CSS 中,background-position 属性是设置背景图像的起始位置的属性。今天,我们来讨论这个属性的定义、用法和效果。 定义 background-position 属性设置背景图像的起始...
在CSS世界中,`background-position`是一个至关重要的属性,它允许我们精确地控制背景图像在元素内的位置。这个属性在网页设计中广泛应用,用于创建各种视觉效果,如图像滑动、定位图标等。本篇文章将深入探讨`...
`background-position`属性是实现这一目标的关键,它允许我们通过坐标系统来调整背景图像相对于元素的位置。下面我们将详细探讨`background-position`的用法及其背后的算法。 首先,`background-position`属性可以...
在CSS中,我们使用`background`属性或者其子属性(如`background-image`、`background-size`、`background-position`、`background-repeat`)来设置背景视频。其中,`background-size`用于控制视频的大小,`...
CSS中的background-position属性用于设置或检索对象的背景图像位置。要使用这个属性,必须先通过background-image属性指定了一个背景图片。background-position属性的位置定位不会受到对象的padding(内边距)属性...
本文将深入探讨如何使用`background-image`属性来实现多张背景图片的设置,并介绍CSS3中的背景渐变。 首先,我们来看一下`background-image`属性的基本语法。它接受一个或多个 `<bg-image>` 值,每个值可以是 `none...
css 之 background-position-x 是 CSS 中的一个属性,用于设置背景图片的水平位置。这个属性是 background-position 属性的简写形式,专门用于设置背景图片的水平位置。 背景图片的水平位置是指背景图片左上角相...
`background-position`属性是CSS(层叠样式表)中的一个核心特性,用于控制背景图像在元素内的位置。这篇博客文章通过实例深入探讨了这一属性的使用方法和技巧。 首先,`background-position`属性允许我们将背景...
最近在项目中需要大量的用到很多标签按钮什么的零碎图片,加上一直没机会使用Css中的”精灵技术“,这里把我对background-position的理解写成文档供更多人使用学习;如果有不对的请大家使劲拍
总结来说,"background-position鱼游动特效"是一个结合了CSS3动画和转换技术的创新应用,它展示了如何利用现代Web技术营造出富有动态感的用户体验。开发者通过精心设计的`animation`和`transform`规则,以及可能的...
标题“利用CSS定位背景图片background-position”指出的是如何通过CSS属性来控制背景图片的定位问题。以下内容将详细阐述如何使用CSS中的background-position属性来精确控制背景图片的显示位置,以及相关的知识点。 ...