`

background-postion属性使用

 
阅读更多

定义和用法

background-position 属性设置背景图像的起始位置。

这个属性设置背景原图像(由 background-image 定义)的位置,背景图像如果要重复,将从这一点开始。

提示:您需要把 background-attachment 属性设置为 "fixed",才能保证该属性在 Firefox 和 Opera 中正常工作。

默认值: 继承性: 版本: JavaScript 语法:
0% 0%
no
CSS1
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 属性的定位像素值

    批量输出 CSS background-position 属性的定位像素值

    css 之 background-position-x

    或者,可以使用 background-position 属性,分別设置背景图片的水平和垂直位置。 例如: ;height:300px;background-image:url(http://www.dnew.cn/template/4color/images/green.png);background-position:100 50...

    对背景图定位中background-position属性的自我理解

    最近在项目中需要大量的用到很多标签按钮什么的零碎图片,加上一直没机会使用Css中的”精灵技术“,这里把我对background-position的理解写成文档供更多人使用学习;如果有不对的请大家使劲拍

    CSS background-position的使用说明详解

    background-position的说明: 设置或检索对象的背景图像位置。必须先指定 background-image 属性。该属性定位不受对象的补丁属性( padding )设置影响。 默认值为: 0% 0% 。此时背景图片将被定位于对象不包括补丁( ...

    background-position鱼游动特效.zip

    background-position鱼游动特效是一款基于css3 animation transform属性制作两条游动的鲨鱼动画特效。

    CSS background-position 属性 定位图片

    复制代码代码如下: .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-position使用详解

    这篇文章将会涉及css背景(background)的基本用法,包括诸如 background-attachment 等的属性,也会介绍一些有关背景(background)的常用技巧,以及 css3 中的 背景(background)(包含4个新的背景(background)属性)。...

    css background-position 用法详细图文介绍

    css background-position背景定位属性想必从事前端开发的朋友并不陌生吧,这个属性很实用的利用它可以实现很多的图片样式效果,下面是其具体的使用方法,感兴趣的朋友不要错过

    用CSS把背景图片平铺参考.pdf

    我们也可以使用background-position属性来实现背景图片的平铺。background-position属性可以设置背景图片的位置,我们可以使用repeat-x或repeat-y来实现背景图片的平铺。 例如: ```css body { background: url...

    CSS3样式表-字体、文本、背景属性.pptx

    ;单元2-3 字体、文本、背景属性;;;;;;;;;...字体属性 ...文本属性 ...背景属性 background background-color background-image backeground-position background-repeat backeground-size background-origin;

    css样式粒子动效的按钮

    CSS实现方式,主要也是两种方式,其实就是想一下有哪些属性可以无限叠加,一个是box-shadow,还有一个是background-image。这里主要通过background-size和background-position来控制原点的尺寸与位置,看着好像挺...

    css样式粒子散开的按钮

    CSS实现方式,主要也是两种方式,其实就是想一下有哪些属性可以无限叠加,一个是box-shadow,还有一个是background-image。这里主要通过background-size和background-position来控制原点的尺寸与位置,看着好像挺...

    css2中文手册 学习css的必选

    background background-attachment background-color background-image background-position background-positionX background-positionY background-repeat layer-background-color layer-background-image ...

    详解background属性的8个属性值(面试题)

    复合属性:background:background-color background-image background -repeat background-position background-attachment CSS3新增:不能用background的复合属性 background-size,background-ori

    css属性详解说明,css属性详解说明

    background 简写属性,作用是将背景属性设置在一个声明中。 background-attachment 背景图像是否固定或者随着页面的其余部分滚动。Scroll随文滚动 background-color 设置元素的背景颜色。 background-image 把...

    CSS常用属性大全.pdf

    * `background-position`: 设置背景图片位置,例如 `background-position: 90% 90%;`、`background-position: top;`、`background-position: bottom;`、`background-position: left;`、`background-position: right;...

Global site tag (gtag.js) - Google Analytics