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. UCS-2和UTF8的四个新知识点和新的疑问

    最初的unicode编码是固定长度的,16位,也就是2两个字节代表一个字符,这样一共可以表示65536个字符.显然,这样要表示各种语言中所有的字符是远远不够的.Unicode4.0规范考虑到了这种情况 ...

  2. [cocos2d]场景切换以及切换进度显示

    本文主要分两个部分叙述,第一是场景切换,第二是场景切换的进度显示. 一.场景切换 参考learn-iphone-and-ipad-cocos2d-game-development 第五章内容 coco ...

  3. 结论: blocking_query 是当前堵塞其他会话正在运行的SQL.而不是原始堵塞SQL

    查看当前session线程号 mysql> select connection_id(); +-----------------+ | connection_id() | +---------- ...

  4. 【HDOJ】2851 Lode Runner

    开始没理解题意.原来destinations是指路的序号.而不是点.DP. #include <stdio.h> #include <string.h> ]; typedef ...

  5. Android 写文件到手机

    1)// 在手机中创建文件 FileOutputStream phone_outStream =this.openFileOutput("1.txt", Context.MODE_ ...

  6. POJ_3104_Drying_(二分,最小化最大值)

    描述 http://poj.org/problem?id=3104 n件衣服,第i件衣服里面有水a[i],自然风干每分钟干1个水,用吹风机每分钟干k个水,但是同时只能对一件衣服使用吹风机,求干完所有衣 ...

  7. Oracle SQL编写注意事项

    1.SQL语句用大写的;因为Oracle总是先解析SQL语句,把小写的字母转换成大写的再执行. 2.数据表最好起别名;因为便于sql优化器快速分析. 3.尽量不要使用 insert into tabl ...

  8. loadrunner 与Md5

    loadrunner 与Md5 1.新建个c vuser脚本 2.把cmd5.h导入脚本 3.在脚本中,引入cmd5.h,可以在action前面加个void,但要屏蔽return 来自为知笔记(Wiz ...

  9. 前端模块化开发学习之gulp&browserify篇

     随着web应用的发展,前端的比重占得越来越多,编写代码从而也越来越复杂.而通常我们需要将不同功能或者不同模块的代码分开写,最后在html中一起加载,这样做是可以的,但是当你需要进行维护或者是二次开发 ...

  10. iw命令

    iwconfig这个老工具已不推荐使用,iw支持大多新的设备并已被加入内核 iw help                            查看帮助 iw dev wlan0 scan     ...