1.定义和用法

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

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

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

默认值: 0% 0%
继承性: no
版本: CSS1
JavaScript 语法: object.style.backgroundPosition="center"

2.可能的值

描述
  • 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 值。

3.实例操作:

html+css代码:

渲染效果:

1.当background-position:-110px -70px;

效果图:

即是图片往上位移70px,往左位移110px;

2.当background-position:10px 10px;

效果图:

即是往右位移10px,往下位移10px;

3.background-position:100% 100%;

效果图:

图片处于容器元素的右下角,与 background-position:right bottom;效果等同。

等同于x:{容器(container)的宽度—背景图片的宽度}*x百分比,超出的部分隐藏。即往右50px
等同于y:{容器(container)的高度—背景图片的高度}*y百分比,超出的部分隐藏。即往下185px;

4.background-position:50% 50%;

效果图:

图片水平和垂直居中。与 background-position:center center;效果等同。

等同于x:{容器(container)的宽度—背景图片的宽度}*x百分比,超出的部分隐藏。
等同于y:{容器(container)的高度—背景图片的高度}*y百分比,超出的部分隐藏。

5.background-position:-50% -50%;

效果图:

等同于x:-{容器(container)的宽度—背景图片的宽度}*x百分比,超出的部分隐藏。即向左移动了25px;
等同于y:-{容器(container)的高度—背景图片的高度}*y百分比,超出的部分隐藏。即向上移动了92.5px;

6.background-position:-100% -100%;

效果图:

等同于x:-{容器(container)的宽度—背景图片的宽度}*x百分比,超出的部分隐藏。即向左移动了50px;
等同于y:-{容器(container)的高度—背景图片的高度}*y百分比,超出的部分隐藏。即向上移动了185px;

版权声明:本文为博主原创文章,未经博主允许不得转载。

CSS background-position随笔的更多相关文章

  1. CSS中position和header和overflow和background

    <!DOCTYPE html> <!--CSS中position属性--> <html lang="en"> <head> < ...

  2. 深入理解css中position属性及z-index属性

    深入理解css中position属性及z-index属性 在网页设计中,position属性的使用是非常重要的.有时如果不能认识清楚这个属性,将会给我们带来很多意想不到的困难. position属性共 ...

  3. 关于CSS 的position定位问题

    对于初学者来说,css的position定位问题是比较常见的.之前搞不清楚postion定位是怎么回事,排版一直歪歪斜斜的,老是排不好 css的定位一般来说,分为四种: position:static ...

  4. CSS background 之设置图片为背景技巧

    首先先来看看background有那些值: 可以按顺序设置如下属性(可点击进入相应的css手册查看使用):background-color 背景颜色background-image 背景图片backg ...

  5. CSS background 属性详解

    CSS background Property 语法: background: bg-color bg-image position/bg-size bg-repeat bg-origin bg-cl ...

  6. CSS之position体验

    目录: 1. position介绍 2. relative 3. position 4. fixed与static 5. 总结 1. position介绍 position最简单的理解就是元素位置的定 ...

  7. [CSS3] CSS Background Images

    Body with background image and gradient html { background: linear-gradient(#000, white) no-repeat; h ...

  8. css background transparent All In One

    css background transparent All In One opacity ul { max-height: 100px; /* max-height: 187px; */ overf ...

  9. 深入理解css中position属性及z-index属性 https://www.cnblogs.com/zhuzhenwei918/p/6112034.html

    深入理解css中position属性及z-index属性 请看出处:https://www.cnblogs.com/zhuzhenwei918/p/6112034.html 在网页设计中,positi ...

  10. PHP全栈开发(八):CSS Ⅲ background

    设置背景颜色: div { background-color:#b0c4de; } 不仅可以给body标签设置背景颜色,还能给p,div,h标签设置背景颜色 设置背景图片: body { backgr ...

随机推荐

  1. 未能找到类型或命名空间名称DbContext

    Visual Studio调试 .NET 项目时报错: 未能找到类型或命名空间名称“DbContext” 解决办法: 首先 右键 引用——System.Data.Entity 其次,在自己项目里搜索E ...

  2. 【转】Android中自定义控件的步骤

    原文网址:http://blog.csdn.net/lianchen/article/details/48038969 Android开发中难免遇到需要自定义控件的需求,有些是产品的要求在Androi ...

  3. (转载)php获取form表单中name相同的表单项

    (转载)http://hi.baidu.com/ruhyxowwzhbqszq/item/5fd9c8b9b594db47ba0e12a9 比如下面的表单: /*form.php*/ <form ...

  4. [转]NHibernate之旅(10):探索父子(一对多)关联查询

    本节内容 关联查询引入 一对多关联查询 1.原生SQL关联查询 2.HQL关联查询 3.Criteria API关联查询 结语 关联查询引入 在NHibernate中提供了三种查询方式给我们选择:NH ...

  5. Ubuntu下安装PAC Manager

    在Windows下习惯使用XShell.PAC Manager其实就是一个在Linux系统类似XShell的工具. 下载地址: https://sourceforge.net/projects/pac ...

  6. 线程中Join的使用例子

    1.实现Runnbale接口, package 网易若干java;//这个例子共有2个线程,一个是主线程,一个是线程t public class MyThread1 implements Runnab ...

  7. ACM1229_还是A+B(求A的第K位的数公式:A%((int)(pow(10,K)))

    #include<stdio.h> #include<math.h> int main() { int A,k,B,sum,c,d; while(scanf("%d% ...

  8. UIWebview 禁止某个方向滚动

    Enable Horizontal scrolling and disable Vertical scrolling: myWebView.scrollView.delegate = self; [m ...

  9. Overview of the Packages JAXP

    The SAX and DOM APIs are defined by the XML-DEV group and by the W3C, respectively. The libraries th ...

  10. eclipse 反编译class 文件 插件-jad

    1.下载 jad.exe  http://pan.baidu.com/s/1i3Ga33n 2.下载jadeclipse http://pan.baidu.com/s/1bn4H1iZ  放在ecli ...