-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy path8定位背景透明.txt
141 lines (124 loc) · 4.26 KB
/
8定位背景透明.txt
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
1.定位
- position
- 我们通过position属性来设置元素是否开启定位，
或者是开启绝对或相对定位。
- 可选值：
- static
- 默认值，如果不设置position属性，默认就是static
- 当position属性设置为static时，元素不开启定位
并且元素会默认在文档流当中
- relative
- 相对定位
- 当position属性值设置为relative时，则开启元素的相对定位
- 相对定位的特点：
1.如果开启来元素的相对定位而不设置其他的偏移量的话，元素不会发生任何变化。
2.相对定位不会改变元素的性质，块元素相对定位以后还是块元素，内联元素相对定位以后还是内联元素。
3.相对定位不会使元素脱离文档流
4.相对定位元素会相对于其自身在文档流中的位置定位
5.相对定位会使元素提升一个层级
- absolute
- 绝对定位
- 当position设置为absolute时，则开启类元素的绝对定位
- 绝对定位的特点：
1.绝对定位的元素会完全脱离文档流
2.绝对定位的元素如果不设置偏移量，它会保持在原来的位置
3.当块元素设置绝对定位以后，它的宽度被内容撑开
当内联元素设置绝对定位以后，它将会变成块元素
4.绝对定位元素会相对于离他最近的祖先定位元素定位，
如果所有的祖先元素都没有开启定位，则会相对于浏览器窗口定位
（往往我们开启一个元素的绝对定位时，同时也会设置其父元素的相对定位）
5.绝对定位会使元素提升一个层级
- fixed
- 固定定位（是一种特殊的绝对定位）
- 固定定位和绝对定位是基本一致的，只不过固定定位的元素永远相对于浏览器窗口定位
而且它不会随浏览器窗口滚动。
- IE6不支持固定定位
偏移量：
- 当position属性值是一个非static的值时，我们可以通过四个偏移量来设置元素的位置。
- 四个值
top:距离定位位置顶边距
right:距离定位位置的右边距
bottom:距离定位位置的下边距
left:距离定位位置的左边距
- 这四个偏移量往往不需要全都使用，只需要使用两个就可以完成定位
只需要指定任意一个垂直方向的偏移量（top、bottom）和任意一个水平方向的偏移量（left、right）
即可完成一个元素的定位。
层级：
- 当元素开启了定位以后，我们可以通过index来指定元素的层级
- 层级越高的元素月优先显示，层级高的会盖住层级低的
- 如果说层级一样高，下边盖住上边的，
即使父元素的层级再高，也不会盖住子元素。
2.背景：
background-color
- 设置元素的背景颜色的
- 可以直接指定一个颜色值
background-image
- 设置背景图片的
- 例子：
background-image:url(图片的路径);
background-repeat
- 设置背景图片的重复方式
- 可选值：
- repeat
- 默认值
- 表示背景图片会按照水平和垂直两个方向重复
- repeat-x
- 表示背景图片会沿着水平方向重复
- repeat-y
- 表示背景图片会沿着垂直方向重复
- no-repeat
- 表示背景图片不会重复
background-position
- 可以用来设置背景图片的位置
- 设置方式：
1.可以使用top left right bottom center来指定元素的位置
- 可以使用这些值的两个来指定一个背景图片的位置
- 如果只指定一个值，则第二个值默认为center
2.可以在position中指定一个x轴和y轴的偏移量来设置背景图片的位置：
- 例子：background-position:x轴偏移量 y轴偏移量
- 意义：
x轴偏移量
- 图片水平方向的偏移量
- 如果指定一个正值，则背景会向右移动
- 如果指定一个负值，则背景会向左移动
y轴偏移量
- 图片垂直方向的偏移量
- 如果指定一个正值，则背景会向下移动
- 如果指定一个负值，则背景会向上移动
- 借用background-position我们可以使用一个CSS-Sprite技术，
使用该技术可以将多个图片整合到一张图片中，然后通过background-position
来选择显示哪张图片。
- 图片整合的特点：
1.将多个图片整合到一起，图片总大小要压缩很多，提供用户请求速度，可以提升用户体验。
2.将多个图片整合到一起，用户发送一次请求可以同时加载多个图片，减少了请求次数。
3.图片整合只适用于背景图片，不会搜索引擎检索。
4.图片整合中的图片不能自适应大小，不能调整大小。
- 一般我们使用图片整合技术都是设置一些小图片，小logo等等。
background-attachment
- 设置背景图片是否随页面滚动
- 可选值：
scroll
- 默认值
- 背景会随页面滚动
fixed
- 背景图片会在页面中固定，不随页面滚动
- 注意当背景设置fixed以后，它的位置会相对于浏览器窗口进行定位
- 往往我们只会给body的背景设置不滚动
- 简写属性：
background
- 通过该属性可以同时设置所有的背景相关的样式，
而且没有顺序和数量的要求。
- 例子：
background:red url() no-repeat center center scroll;
- 透明颜色：
opacity:
- 用来设置元素的透明背景
- 它需要一个0-1的值
0表示完全都透明
1表示完全不透明
- 但是注意：IE8及其以下的浏览器不支持该属性。
- IE8需要这样设置：
filter:alpha(opacity=50)
- IE8中的值需要一个0-100的值
0表示完全透明
100表示完全不透明