web 开发:CSS3 常用属性——速查手册!
web 开发:CSS3 常用属性——速查手册!
CSS3 简介:http://www.runoob.com/css3/css3-intro.html
1.目录
- background-position:
CSS Backgrounds and Borders Module Level 3
W3C Candidate Recommendation 9 September 2014
http://www.w3.org/TR/css3-background/#background-position
http://www.w3.org/TR/css3-background/#backgrounds
3.6. Positioning Images: the ‘background-position
’ property
Name: | background-position |
---|---|
Value: | <position> [ , <position> ]* |
Initial: | 0% 0% |
Applies to: | all elements |
Inherited: | no |
Percentages: | refer to size of background positioning area minus size of background image; see text |
Media: | visual |
Computed value: | A list, each item consisting of: a pair of offsets (horizontal and vertical) from the top left origin each given as a combination of an absolute length and a percentage |
Animatable: | as repeatable list of simple list of length, percentage, or calc |
If background images have been specified, this property specifies their initial position (after any resizing) within their corresponding background positioning area.
Where
<position> = [
[ left | center | right | top | bottom | <percentage> | <length> ]
|
[ left | center | right | <percentage> | <length> ]
[ top | center | bottom | <percentage> | <length> ]
|
[ center | [ left | right ] [ <percentage> | <length> ]? ] &&
[ center | [ top | bottom ] [ <percentage> | <length> ]? ]
]
If only one value is specified, the second value is assumed to be ‘center
’. If two values are given, a length or percentage as the first value represents the horizontal position (or offset) and a length or percentage as the second value represents the vertical position (or offset). <percentage> and <length> values here represent an offset of the top left corner of the background image from the top left corner of the background positioning area.
Note that a pair of keywords can be reordered while a combination of keyword and length or percentage cannot. So ‘center left
’ is valid while ‘50% left
’ is not.
If three or four values are given, then each <percentage> or<length> represents an offset and must be preceded by a keyword, which specifies from which edge the offset is given. For example, ‘background-position: bottom 10px right 20px
’ represents a ‘10px
’ vertical offset up from the bottom edge and a ‘20px
’ horizontal offset leftward from the right edge. If three values are given, the missing offset is assumed to be zero.
Positive values represent an offset inward from the edge of the background positioning area. Negative values represent an offset outward from the edge of the background positioning area.
The following declarations give the stated (horizontal, vertical) offsets from the top left corner:
background-position: left 10px top 15px; /* 10px, 15px */
background-position: left top ; /* 0px, 0px */
background-position: 10px 15px; /* 10px, 15px */
background-position: left 15px; /* 0px, 15px */
background-position: 10px top ; /* 10px, 0px */
background-position: left top 15px; /* 0px, 15px */
background-position: left 10px top ; /* 10px, 0px */
- <percentage>
-
A percentage for the horizontal offset is relative to (width of background positioning area - width of background image). A percentage for the vertical offset is relative to (height of background positioning area - height of background image), where the size of the image is the size given by ‘
background-size
’.For example, with a value pair of ‘
0% 0%
’, the upper left corner of the image is aligned with the upper left corner of, usually, the box's padding edge. A value pair of ‘100% 100%
’ places the lower right corner of the image in the lower right corner of the area. With a value pair of ‘75% 50%
’, the point 75% across and 50% down the image is to be placed at the point 75% across and 50% down the area.Diagram of the meaning of ‘
background-position: 75% 50%
’. - <length>
- A length value gives a fixed length as the offset. For example, with a value pair of ‘
2cm 1cm
’, the upper left corner of the image is placed 2cm to the right and 1cm below the upper left corner of the background positioning area. - ‘
top
’ - Computes to ‘
0%
’ for the vertical position if one or two values are given, otherwise specifies the top edge as the origin for the next offset. - ‘
right
’ - Computes to ‘
100%
’ for the horizontal position if one or two values are given, otherwise specifies the right edge as the origin for the next offset. - ‘
bottom
’ - Computes to ‘
100%
’ for the vertical position if one or two values are given, otherwise specifies the bottom edge as the origin for the next offset. - ‘
left
’ - Computes to ‘
0%
’ for the horizontal position if one or two values are given, otherwise specifies the left edge as the origin for the next offset. - ‘
center
’ - Computes to ‘
50%
’ (‘left 50%
’) for the horizontal position if the horizontal position is not otherwise specified, or ‘50%
’ (‘top 50%
’) for the vertical position if it is.
The following ‘background
’ shorthand declarations use keywords to set ‘background-position
’ to the stated percentage values.
body { background: url("banner.jpeg") right top } /* 100% 0% */
body { background: url("banner.jpeg") top center } /* 50% 0% */
body { background: url("banner.jpeg") center } /* 50% 50% */
body { background: url("banner.jpeg") bottom } /* 50% 100% */
In the example below, the (single) image is placed in the lower-right corner of the viewport.
body {
background-image: url("logo.png");
background-attachment: fixed;
background-position: 100% 100%;
background-repeat: no-repeat;
}
Background positions can also be relative to other corners than the top left. E.g., the following puts the background image 10px from the bottom and 3em from the right:
background-position: right 3em bottom 10px
See the section “Layering multiple background images” for how ‘background-position
’ interacts with other comma-separated background properties to form each background image layer.
2.
1
1
1
xxxxxxxxxxxxxxxx
xxxxxxxxxxxxx
xxxxxxxxxxxxxx
web 开发:CSS3 常用属性——速查手册!
web 开发:CSS3 常用属性——速查手册!的更多相关文章
- 实用掌中宝--HTML&CSS常用标签速查手册 PDF扫描版
实用掌中宝--HTML&CSS常用标签速查手册 内容推荐: 本书第一篇以语法和实例相结合的形式,详细讲解了HTML语言中各个元素及其属性的作用.语法和显示效果:第二篇从CSS基本概念开始,分别 ...
- Docker常用命令速查手册(华贵铂金版)
原创声明:作者:Arnold.zhao 博客园地址:https://www.cnblogs.com/zh94 Docker常用命令速查手册 搜索仓库镜像 docker search nginx 获取 ...
- Delphi 7.0常用函数速查手册(磁盘文件类)
在Delphi 7.0中,已为我们定义好了非常多的函数,大致分类有6种:数据类型转换函数.字符串.数组操作函数.文件.磁盘操作函数.内存.指针操作函数.数学运算函数.日期函数. 在Delphi中调用函 ...
- Linux系统常用命令速查手册
点击上方"开源Linux",选择"设为星标" 回复"学习"获取独家整理的学习资料! 系统信息 arch #显示机器的处理器架构(1 ...
- Ubuntu常用命令速查手册-珍藏版-完整版
sudo apt-get install 软件名 安装软件命令 sudo nautilus 打开文件(有root权限) su root 切换到“root” ls 列出当前目录文件(不包括隐含文件) l ...
- Java程序员必会常用Linux速查手册
目錄 系统服务管理 文件管理 查看日志 压缩与解压 磁盘和网络管理 防火墙 ftp操作 软件的安装与管理 其他 系统服务管理 systemctl 输出系统中各个服务的状态: systemctl lis ...
- Git常用命令速查手册
Git组成 1.初始化仓库 git init 2.将文件添加到仓库 git add 文件名 # 将工作区的某个文件添加到暂存区 git add -u # 添加所有被tracked文件中被修改或删除的文 ...
- Git 常用命令速查手册
来源:https://www.jianshu.com/p/5ee9897b6b65 1.初始化仓库 git init 2.将文件添加到仓库 git add 文件名 # 将工作区的某个文件添加到暂存区 ...
- [Git]Git常用命令速查手册
看的别人的文章,来源:https://mp.weixin.qq.com/s/SGRcE9EPOu4Tph65tzPzQw
随机推荐
- java对象和json对象之间互相转换
import java.util.ArrayList;import java.util.Collection;import java.util.Iterator;import java.util.Li ...
- Angularjs中的ng-class
在angular中为我们提供了3种方案处理class:1:scope变量绑定.(不推荐使用)2:字符串数组形式.3:对象key/value处理. 我们继续其他两种解决方案:1字符串数组形式是针对cla ...
- intent.putExtra()方法参数详解
[开篇骂几句:fuck]1.扯淡intent.putExtra()怎么使用?2.胡说intent.putExtra(); [扯淡:其实你在问它怎么用的时候,你要明白,你知道不知道这是个什么东东,有必要 ...
- PopUpManager弹出窗口
<?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="ht ...
- tomcat连接数设置
如何加大tomcat连接数 在tomcat配置文件server.xml中的<Connector ... />配置中,和连接数相关的参数有:minProcessors:最小空闲连接线程数,用 ...
- python 多线程 paramiko实现批量命令输入输出
远程批量执行命令 实现多线程执行 速度快 实现多并发登录 #-*- coding: utf-8 -*- #!/usr/bin/python import paramiko import threadi ...
- 使用SQL Server Management Studio 创建作业备份数据库
在项目中,经常需要备份数据库,如果能做到只需点个按钮(“开始备份数据库”按钮),然后什么都不管,数据库就自动备份好了,或者服务器上的数据库隔一段时间自动备份一次,那该多好啊. Sql server 的 ...
- c++中string的用法
之所以抛弃char*的字符串而选用C++标准程序库中的string类,是因为他和前者比较起来,不必 担心内存是否足够.字符串长度等等,而且作为一个类出现,他集成的操作函数足以完成我们大多数情况下(甚至 ...
- liunx 平台下软件包管理
RPM/DPKG 两大阵营简介 在 GNU/Linux( 以下简称 Linux) 操作系统中,RPM 和 DPKG 为最常见的两类软件包管理工具,他们分别应用于基于 RPM 软件包的 Linux 发行 ...
- HDU 1010 Temper of the bone(深搜+剪枝)
Tempter of the Bone Time Limit : 2000/1000ms (Java/Other) Memory Limit : 65536/32768K (Java/Other) ...