web 开发：CSS3 常用属性——速查手册！

web 开发：CSS3 常用属性——速查手册！

CSS3 简介：http://www.runoob.com/css3/css3-intro.html

1.目录

http://caniuse.com/

http://www.w3.org/TR/#tr_CSS

http://www.html5cn.com.cn/book/css/index.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 常用属性——速查手册！