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 ...
随机推荐
- [flex & bison]编译器杂谈
flex与bison是编译器设计工具.这里的编译器为广义,其中包括一般的编译器.脚本解析器等,需要进行语言结构解析来得出意义的程序. 当我们需要用一个语言来设计一款编译器时,需要考虑太多设计重心外的东 ...
- POJ1159 Palindrome(dp)
题目链接. 分析: 感叹算法的力量. 方法一: 设 dp[i][j] 为字符串 s, 从 i 到 j 需要添加的最少字符数. 那么如果 s[i] == s[j], dp[i][j] = dp[i+1] ...
- Java中join()方法的理解
thread.Join把指定的线程加入到当前线程,可以将两个交替执行的线程合并为顺序执行的线程. 比如在线程B中调用了线程A的Join()方法,直到线程A执行完毕后,才会继续执行线程B. t.join ...
- gtest代码库浅析
代码库工程概述 IDE:Visual Studio 2010 sln路径:gtest\msvc\gtest.sln 用IDE打开上面的sln,可以看到以下四个工程,算不上复杂.展开之后更是感觉这几个工 ...
- 配置Windows 2008 R2 防火墙允许远程访问SQL Server 2008 R2 更改端口 连接字符串 IP+逗号+端口号
1.先修改 sql server 2008R2的端口号吧,1433经常成为别人入侵的端口,在sql server 配置管理器 -->sql server 网络配置-->MSSQLSER ...
- 基于Minifilter框架的文件过滤驱动理解
概述 Minifilter即File System Minifilter Drivers,是Windows为了简化第三方开发人员开发文件过滤驱动而提供的一套框架,这个框架依赖于一个称之为Filter ...
- 局部更新 java web 的文件
方法一:直接更新文件 直接修改部署后的文件.比如用 maven 打包成 WAR 文件,部署(复制)到 Tomcat/webapps 目录后,Tomcat 会立即将 WAR 文件解压成目录结构.此时,只 ...
- Foundation: Binary Search
/* Binary search. * * Implementation history: * 2013-10-5, Mars Fu, first version. */ /* [Binary Sea ...
- Oracle Dataguard三种保护模式
Oracle Dataguard提供了三种数据保护模式,在此分别总结一下三种数据保护模式的特点. 1.最大保护模式1)这种模式提供了最高级别的数据保护能力:2)要求至少一个物理备库收到重做日志后,主库 ...
- Oracle——PL/SQL 语句
目录: 1.什么是PL/SQL 2.PL/SQL 语法基础 3.PL/SQL 实例 一.过程 实例 二.函数 实例 三.游标的使用 实例 四.动态sql 实例 五.触发器 实例 1.什么是 ...