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 ...
随机推荐
- Oulipo
poj3461:http://poj.org/problem?id=3461 题意:求一个串在另一个串中出现的次数. 题解:直接套用KMP即可,在统计的时候做一下修改.找到之后不是直接返回,而是移动i ...
- [flex & bison]编译器杂谈
flex与bison是编译器设计工具.这里的编译器为广义,其中包括一般的编译器.脚本解析器等,需要进行语言结构解析来得出意义的程序. 当我们需要用一个语言来设计一款编译器时,需要考虑太多设计重心外的东 ...
- Keil uVISION2 自学教程
Keil uVISION2 是众多单片机应用开发软件中优秀的软件之一,它支持众多不同公司的 MCS-51 架构的芯片,它集编辑,编译,仿真等于一体,同时还支持.PLM.汇编和 C 语言的程序设计, ...
- 【Java线程】Java线程池ExecutorService
示例 import java.util.concurrent.ExecutorService; import java.util.concurrent.Executors; import java.u ...
- 将银行读卡设备读取到的身份证头像Bitmap属性转换成路径
需求是这样的,在项目开发的时候要求读取身份证,读到身份证的所有信息(信息里面包括头像属性,类型是Bitmap的).然后服务器要求我传过去的头像信息是String类型的Uri路径. 这是读卡器读到的身份 ...
- [Design Pattern] Proxy Pattern 简单案例
Proxy Pattern, 即代理模式,用一个类代表另一个类的功能,用于隐藏.解耦真正提供功能的类,属于结构类的设计模式. 下面是 代理模式的一个简单案例. Image 定义接口,RealImage ...
- 《Linear Algebra and Its Applications》-chaper2-矩阵代数-分块矩阵
分块矩阵的概念: 在矩阵的实际应用中,为了形式的更加简化我们将一个较大的矩阵的内部进行一定的划分,使之成为几个小矩阵,然后在表大矩阵的时候,矩阵的内部元素就用小矩阵代替. 进行了这一步简化,我们就要分 ...
- AFNetworking (3.1.0) 源码解析 <五>
这次主要开始讲解一下文件夹Serialization下的类AFURLRequestSerialization. AFURLRequestSerialization类遵守`AFURLRequestSer ...
- openssl生成自签名证书
1.生成x509格式的CA自签名证书 openssl req -new -x509 -keyout ca.key -out ca.crt 2.生成服务端的私钥(key文件)及申请证书文件csr文件 o ...
- ActionScript通用开发框架
ActionScript 3(简称as)自2006年诞生以来,出现了一大批很优秀框架.就我的知识领域,运用包括pureMVC.pushButton Engine(组件框架).Robotlegs.Ash ...