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 ...
随机推荐
- EntityFramework 插件之EntityFramework.Extended (批量处理)
接手了一个用EF来做的项目,由于项目中使用的原生处理,导致很多update都是采用先select 后 update的方式来实现,同时无法批量执行逻辑如:根据订单类型统一更新状态等.所以在经过了N多查找 ...
- 您好,想问一下目前哪些营业厅可以办理NFC-SIM卡的更换业务?_百度知道
您好,想问一下目前哪些营业厅可以办理NFC-SIM卡的更换业务?_百度知道 您好,想问一下目前哪些营业厅可以办理NFC-SIM卡的更换业务? 2013-06-14 10:39 maxre ...
- java中字符串的比较
compareTo方法是比较两个字符串的词典顺序 也就是在字典中的顺序,比如“abcd”在“acdb”前面 大于返回1,小于返回-1 equals:比较两字符串的内容是否相同. 相同返回1,不同返回 ...
- 利用PyQt4写的小工具软件
应公司文职工作人员需求,写一个车间人员工作时间的统计软件,输入开始工作时间1,再输入结束工作时间2,计算两个时间的差值. 根据需求,初步构想的UI界面如下: 下面开始干活. 分析后觉得利用PyQt4来 ...
- 解决本地软件链接不上虚拟机mysql 的问题:grant all privileges on *.* to 'root'@'%' identified by 'nsfocus'
mysql> GRANT ALL PRIVILEGES ON *.* TO 'root'@'localhost' -> IDENTIFIED BY 'some_pass' WITH ...
- Citrix 服务器虚拟化之十三 Xenserver虚拟机内存优化与性能监控
Citrix 服务器虚拟化之十三 Xenserver虚拟机内存优化与性能监控 XenServer的DMC通过自动调节运行的虚拟机的内存,每个VM分配给指定的最小和最大内存值之间,以保证性能并允许每 ...
- 在Mac中安装.Net Core的开发环境
在mac中部署dotnet core开发环境,我的MacOS版本号为OSX EI Capitan 10.11.6 1.安装brew homebrew官网推荐的安装命令如下: /usr/bin/ruby ...
- [转] 用source命令执行脚本和用sh执行脚本之间的区别
from: http://blog.csdn.net/david_xtd/article/details/8012627 问题: 有很多方式可以执行脚本, 1).source test.bsh 2). ...
- git 取消追踪
git rm --cached filePath这个操作不会删除这个文件
- Citrix Presentation server can not contact the license server
If you come across the above error, you may also come across one or more of the errors below within ...