`

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`属性是一个非常重要的部分,它控制着背景图像在元素内的位置。这个属性允许我们精确地定位背景图像,从而实现各种视觉效果。 批量输出`background-position`属性的定位像素值通常是...

    background-position 的学习.zip

    在CSS世界中,`background-position`是一个至关重要的属性,它允许我们精确地控制背景图像在元素内的位置。这个属性在网页设计中广泛应用,用于创建各种视觉效果,如图像滑动、定位图标等。本篇文章将深入探讨`...

    CSS中背景图片定位方法:background-position的用法

    `background-position`属性是实现这一目标的关键,它允许我们通过坐标系统来调整背景图像相对于元素的位置。下面我们将详细探讨`background-position`的用法及其背后的算法。 首先,`background-position`属性可以...

    关于背景图片的定位(background-position)

    最后,文章可能会提醒开发者,`background-position`与`background-size`、`background-repeat`、`background-origin`和`background-clip`等属性结合使用时,能创造出更多复杂的背景图像效果。这些属性的组合使用...

    CSS background-position 属性 定位图片

    background-position 属性也可以使用关键字,如 left、right、center、top、bottom 等。例如,background-position: left top;,表示背景图片的水平位置在左侧,垂直位置在顶部。 实例 下面是一个使用 background-...

    css 之 background-position-x

    或者,可以使用 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属性的具体例子: 1. background-position: left top; 背景图片的左上角和容器的左上角对齐,超出的部分隐藏,相当于background-position: 0, 0或者background-position: 0% 0%。...

    css3实现一个div设置多张背景图片及background-image属性实例演示

    本文将深入探讨如何使用`background-image`属性来实现多张背景图片的设置,并介绍CSS3中的背景渐变。 首先,我们来看一下`background-image`属性的基本语法。它接受一个或多个 `<bg-image>` 值,每个值可以是 `none...

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

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

    前端开源库-css-background-video

    在CSS中,我们使用`background`属性或者其子属性(如`background-image`、`background-size`、`background-position`、`background-repeat`)来设置背景视频。其中,`background-size`用于控制视频的大小,`...

    background-position鱼游动特效.zip

    通过`background-position`属性,我们可以精确控制这些图像在元素内的位置,从而实现鱼游动的效果。在`说明.htm`和`说明.txt`中,可能详细介绍了如何使用和定制这个特效,包括代码解释、示例和注意事项。 总结来说...

    CSS背景background、background-position使用详解

    主要的背景属性包括`background-color`、`background-image`、`background-position`、`background-repeat`和`background-attachment`,这些属性可以通过合并使用缩写属性`background`来一次性设定。 1. **背景颜色...

    利用CSS定位背景图片 background-position

    以下内容将详细阐述如何使用CSS中的background-position属性来精确控制背景图片的显示位置,以及相关的知识点。 首先,需要理解背景图片定位的基本概念。在一个网页元素上设置背景图片时,如果图片的尺寸小于元素的...

    background-repeat 的学习.zip

    `background-repeat`通常与`background-image`、`background-position`和`background-size`属性一起使用,以实现更精细的背景控制。例如,可以调整`background-position`来改变图像在背景中的初始位置,或者通过`...

Global site tag (gtag.js) - Google Analytics