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 ...
随机推荐
- 使用Java正则表达式的分组解析身份证的年月日
根据Java的Pattern和Matcher类通过分组解析出身份证的年月日: public class GetDateInIdCard { public static void main(String ...
- zip压缩解压缩 项目icsharpcode-SharpZipLib-e012155
大家可以到http://www.icsharpcode.net/opensource/sharpziplib/ 下载SharpZiplib的最新版本,支持Zip, GZip, BZip2 和Tar格式 ...
- TeeChart的最小步长和最大步长
/// <summary> /// 坐标轴的最大步长 /// </summary> public double MajorStep { get { return axis.Ca ...
- c#4.0新特性之协变与逆变
1.C#3.0以前的协变与逆变 如果你是第一次听说这个两个词,别担心,他们其实很常见.C#4.0中的协变与逆变[1](Covariance and contravariance)有了进一步的完善,主要 ...
- 【canvas】伸缩 / 剪裁 / 文本 / 阴影 / 填充图案 / 填充渐变
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8& ...
- 如用使用高版本framework,比如支持iOS5及以上的工程中使用Social.framework
在Targets -> Build Phases里的 Link Binary With Libraries项中,将高版本的framework,如Social.framework 设置成Optio ...
- 【转】在Ubuntu上下载、编译和安装Android最新源代码
原文网址:http://blog.csdn.net/luoshengyang/article/details/6559955 看完了前面说的几本书之后,对Linux Kernel和Android有一定 ...
- 字符串编码、Base64字符串 互转
/// <summary> /// 将字符串编码为Base64字符串 /// </summary> /// <param name="str"& ...
- [转]js动态创建json类型
废话少说:json是一个特有的键值对数组类型.既然是数组类型那么我们就可以这样定义 1.先定义数组 var Data = []; 2.理解键值对 对象名:值{ "id": i, & ...
- UVA 4728 Squares(凸包+旋转卡壳)
题目链接:http://acm.hust.edu.cn/vjudge/problem/viewProblem.action?id=17267 [思路] 凸包+旋转卡壳 求出凸包,用旋转卡壳算出凸包的直 ...