css background-position:x% y%
规则1: background-position:xpx ypx;
为正值时:背景图片的左上顶点朝右下移动直至距离div的左上顶点为xpx ypx;
规则2: background-position:-xpx -ypx;
为负值时:背景图片的左上顶点朝左上移动直至距离div的左上顶点为xpx ypx;
规则3: background-position:x% y%;
背景图片的x% y%所在的那一点和div的x% y%所在的那一点重合时的效果;
有时候这一点不是能容易的一眼看出,可能还要稍微计算一下。通常情况下规则1/2是最简单易行的。
在chrome中测试,当页面缩放的时候,规则1/2和3的背景图片都会跟着一起缩放。
规则4: background-position:left bottom;
把left看作0%,bottom看作100%后同规则3一致。
css background-position:x% y%的更多相关文章
- CSS中position和header和overflow和background
<!DOCTYPE html> <!--CSS中position属性--> <html lang="en"> <head> < ...
- PHP全栈开发(八):CSS Ⅲ background
设置背景颜色: div { background-color:#b0c4de; } 不仅可以给body标签设置背景颜色,还能给p,div,h标签设置背景颜色 设置背景图片: body { backgr ...
- 深入理解css中position属性及z-index属性
深入理解css中position属性及z-index属性 在网页设计中,position属性的使用是非常重要的.有时如果不能认识清楚这个属性,将会给我们带来很多意想不到的困难. position属性共 ...
- CSS 背景-CSS background
这里有个很好的样式学习网站:http://www.divcss5.com/rumen/r125.shtml 一.Css background背景语法 - TOP CSS背景基础知识 CSS 背 ...
- HTML CSS——background的认识(一)
今天回归bug时无意间看到了样式表中background属性,如今总结一下: 1.background-color:设置元素的背景色.其值能够为:color-name.color-rgb.color- ...
- 关于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 ...
随机推荐
- 云方案,依托H3C彩虹云存储架构,结合UIA统一认证系统,实现了用户数据的集中存储和管理
客户的声音 资料云项目在迷你云基础上二次开发,通过使用云存储技术及文件秒传技术,对文件进行统一存储与管理,以达到节约文件管理成本.存储成本目的:通过有效的文件版本控制机制,以达到风险管控的目的:通过多 ...
- Fork 一个仓库并同步
Fork 一个示例仓库 Fork 是对一个仓库的克隆.克隆一个仓库允许你自由试验各种改变,而不影响原始的项目. 一般来说,forks 被用于去更改别人的项目(贡献代码给已经开源的项目)或者使用别人的项 ...
- XCode7中不能使用http的临时配置解决办法
先看看iOS9新特性中关于ATS的官方文档: App Transport Security App Transport Security (ATS) enforces best practices i ...
- Column count of mysql.proc is wrong. Expected 20, found 16. Created with MySQL 50096, now running 50173.
IDEA链接mysql提示 Column count of mysql.proc is wrong. Expected 20, found 16. Created with MySQL 50096, ...
- windows 编程 —— 消息与参数(滚动条、键盘、鼠标)
目录: 滚动条 键盘 鼠标 滚动条ScrollBar 发送消息:WM_VSCROLL和WM_HSCROLL 参数wParam:wParam消息参数被分为一个低字组和一个高字组.wParam的低字组是一 ...
- 有趣的js符号{}、[]、""、~、++等转换
(!(~+[])+{})[--[~+""][+[]]*[~+[]] + ~~!+[]]+({}+[])[[~!+[]]*~+[]] http://www.jointforce.co ...
- Android 6.0 反射 newInstance
Android 6.0 从预览版发布到现在已经快一年的时间了,然而市场占有率还是低的可怜,国内更不用说.随着三星.华为.小米开始升级至6.0 ,以及上半年各厂商新机逐渐发布,6.0的市场占有率必将迎来 ...
- jpeg和gif已经影响互联网发展进程了,他们应该被历史淘汰了!!!
本人发现.传统的图片格式已经不适应互联网时代了!!!,故本人发起定义一种新的图片格式.后缀名为 .gnet 互联网上的图片大多有这几种来源.微博上传,视频截图,网络编辑人上传等,以眼下的技术.这些图片 ...
- LSI SAS 3108 配置操作
配置LSISAS3108 介绍LSISAS3108的配置操作. 5.1 登录CU界面 介绍登录LSISAS3108的CU配置界面的方法,以及CU界面的主要功能. 5.2 创建RAID 介绍在LSISA ...
- NYOJ 284 坦克大战 bfs + 优先队列
这类带权的边的图,直接广搜不行,要加上优先队列,这样得到的结果才是最优的,这样每次先找权值最小的,代码如下 #include <stdio.h> #include <iostream ...