CSS background-position随笔
1.定义和用法
background-position 属性设置背景图像的起始位置。
这个属性设置背景原图像(由 background-image 定义)的位置,背景图像如果要重复,将从这一点开始。
提示:您需要把 background-attachment 属性设置为 "fixed",才能保证该属性在 Firefox 和 Opera 中正常工作。
默认值: | 0% 0% |
---|---|
继承性: | no |
版本: | CSS1 |
JavaScript 语法: | object.style.backgroundPosition="center" |
2.可能的值
值 | 描述 |
---|---|
|
如果您仅规定了一个关键词,那么第二个值将是"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随笔的更多相关文章
- CSS中position和header和overflow和background
<!DOCTYPE html> <!--CSS中position属性--> <html lang="en"> <head> < ...
- 深入理解css中position属性及z-index属性
深入理解css中position属性及z-index属性 在网页设计中,position属性的使用是非常重要的.有时如果不能认识清楚这个属性,将会给我们带来很多意想不到的困难. position属性共 ...
- 关于CSS 的position定位问题
对于初学者来说,css的position定位问题是比较常见的.之前搞不清楚postion定位是怎么回事,排版一直歪歪斜斜的,老是排不好 css的定位一般来说,分为四种: position:static ...
- CSS background 之设置图片为背景技巧
首先先来看看background有那些值: 可以按顺序设置如下属性(可点击进入相应的css手册查看使用):background-color 背景颜色background-image 背景图片backg ...
- CSS background 属性详解
CSS background Property 语法: background: bg-color bg-image position/bg-size bg-repeat bg-origin bg-cl ...
- CSS之position体验
目录: 1. position介绍 2. relative 3. position 4. fixed与static 5. 总结 1. position介绍 position最简单的理解就是元素位置的定 ...
- [CSS3] CSS Background Images
Body with background image and gradient html { background: linear-gradient(#000, white) no-repeat; h ...
- css background transparent All In One
css background transparent All In One opacity ul { max-height: 100px; /* max-height: 187px; */ overf ...
- 深入理解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 ...
- PHP全栈开发(八):CSS Ⅲ background
设置背景颜色: div { background-color:#b0c4de; } 不仅可以给body标签设置背景颜色,还能给p,div,h标签设置背景颜色 设置背景图片: body { backgr ...
随机推荐
- 未能找到类型或命名空间名称DbContext
Visual Studio调试 .NET 项目时报错: 未能找到类型或命名空间名称“DbContext” 解决办法: 首先 右键 引用——System.Data.Entity 其次,在自己项目里搜索E ...
- 【转】Android中自定义控件的步骤
原文网址:http://blog.csdn.net/lianchen/article/details/48038969 Android开发中难免遇到需要自定义控件的需求,有些是产品的要求在Androi ...
- (转载)php获取form表单中name相同的表单项
(转载)http://hi.baidu.com/ruhyxowwzhbqszq/item/5fd9c8b9b594db47ba0e12a9 比如下面的表单: /*form.php*/ <form ...
- [转]NHibernate之旅(10):探索父子(一对多)关联查询
本节内容 关联查询引入 一对多关联查询 1.原生SQL关联查询 2.HQL关联查询 3.Criteria API关联查询 结语 关联查询引入 在NHibernate中提供了三种查询方式给我们选择:NH ...
- Ubuntu下安装PAC Manager
在Windows下习惯使用XShell.PAC Manager其实就是一个在Linux系统类似XShell的工具. 下载地址: https://sourceforge.net/projects/pac ...
- 线程中Join的使用例子
1.实现Runnbale接口, package 网易若干java;//这个例子共有2个线程,一个是主线程,一个是线程t public class MyThread1 implements Runnab ...
- 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% ...
- UIWebview 禁止某个方向滚动
Enable Horizontal scrolling and disable Vertical scrolling: myWebView.scrollView.delegate = self; [m ...
- 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 ...
- eclipse 反编译class 文件 插件-jad
1.下载 jad.exe http://pan.baidu.com/s/1i3Ga33n 2.下载jadeclipse http://pan.baidu.com/s/1bn4H1iZ 放在ecli ...