`
bdk82924
  • 浏览: 563542 次
  • 性别: Icon_minigender_1
  • 来自: 南京
社区版块
存档分类
最新评论

CSS background-position 属性

    博客分类:
  • Web
 
阅读更多

http://www.w3school.com.cn/css/pr_background-position.asp

 

 

定义和用法

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 值。

 

 

例:

.bg{ 
	background-image:url(icons.png)  ;
	background-position:0px -110px;
	height:20px;
	width:20px; 
	background-repeat:no-repeat;  
}

 

分享到:
评论

相关推荐

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

    在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 属性 定位图片

    CSS background-position 属性定位图片 在 CSS 中,background-position 属性是设置背景图像的起始位置的属性。今天,我们来讨论这个属性的定义、用法和效果。 定义 background-position 属性设置背景图像的起始...

    background-position 的学习.zip

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

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

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

    前端开源库-css-background-video

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

    CSS background-position的使用说明详解

    CSS中的background-position属性用于设置或检索对象的背景图像位置。要使用这个属性,必须先通过background-image属性指定了一个背景图片。background-position属性的位置定位不会受到对象的padding(内边距)属性...

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

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

    css 之 background-position-x

    css 之 background-position-x 是 CSS 中的一个属性,用于设置背景图片的水平位置。这个属性是 background-position 属性的简写形式,专门用于设置背景图片的水平位置。 背景图片的水平位置是指背景图片左上角相...

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

    `background-position`属性是CSS(层叠样式表)中的一个核心特性,用于控制背景图像在元素内的位置。这篇博客文章通过实例深入探讨了这一属性的使用方法和技巧。 首先,`background-position`属性允许我们将背景...

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

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

    background-position鱼游动特效.zip

    总结来说,"background-position鱼游动特效"是一个结合了CSS3动画和转换技术的创新应用,它展示了如何利用现代Web技术营造出富有动态感的用户体验。开发者通过精心设计的`animation`和`transform`规则,以及可能的...

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

    标题“利用CSS定位背景图片background-position”指出的是如何通过CSS属性来控制背景图片的定位问题。以下内容将详细阐述如何使用CSS中的background-position属性来精确控制背景图片的显示位置,以及相关的知识点。 ...

Global site tag (gtag.js) - Google Analytics