CSS学习二：CSS图片，背景

1. CSS图片效果

1.1. 图片样式

1. 图片边框(border)

<img src=”1.jpg” border=”1”/>, 可以设置: border-style, border-color, border-width(边框粗细)

经验之谈：

很多属性都可以将各个子属性写在一行中，比如border, font, margin, padding.

2. 图片缩放

图片的缩放指的是就是图片的大小等。可以通过设置width和height来操作。他们均可以设置相对值和绝对值，相对值使用百分比。使用相对值，当缩放浏览器的窗口时，则图片会自动的跟着缩放，如果使用绝对值，则图片保持大小不变。如果只设置了一个width或者height，则另外的一个会跟着同比缩放。

经验之谈：在实际应用中，经常先固定图片一边的长短，再单独调整另外的一边。

3. 图片的对齐

横向对齐方式(text-align)：和文字的水平对齐一样，也可以设置左，中，右，不同的是，不能对图片直接设置对齐方式，只能设置其父类标注。

纵向对齐方式(vertical-align)：值比较多，包括baseline, bottom, middle, sub, super, text-bottom, text-top, top. 当vertical-align的值为bottom和sub时，IE和Firefox的显示效果不一致，因此在实际应用中要尽量避免这种情况。

也可以通过数值来进行调整，负数或者整数都可以。

1.2. 图文混排

1. 文字环绕： 给图片设置float属性来实现文字环绕。

2. 图片和文字间距：给img添加margin来设置间距。

3. 八仙过海实例。

2. CSS背景

1.3. 背景颜色

1. 页面背景色(background-color)

2. 背景色给页面分块

给不同的块，设置不同的颜色，从而达到分块的目的。Banner是从左到右的渐变图片，颜色由图片过度到背景颜色，非常自然，这是因为背景颜色和图片的颜色很相似。

1.4. 背景图片

1. 背景图(background-img)

2. 背景图重复(background-repeat)

设置重复方式，包括水平，垂直重复和不重复等。

3. 背景图片位置（backgrou：nd-positions）

他的值可以是: top left, top center, top right, center left, center center, cener right, bottom left, bottom right, bottom center. 除此之外，背景图片还可以通过设置百分比或者固定值来达到精确定位。

比如: background-position: 50% 60%.

4. 固定背景图片（background-attachement）

5. 添加多个背景图片： 给多个标记添加背景图片来实现这个效果。

6. CSS不能设置透明度，因此如果需要，一般是采用两个图片来完成的。其中一个图片变淡。

对应的三个案例：

八仙过海CSS案例：http://115.com/file/bhksar9a#

背景色分块实现主界面：http://115.com/file/bhksagp9#

个人主页CSS：http://115.com/file/aqxfbu5s#

转载于:https://www.cnblogs.com/kevinhigher/archive/2011/10/10/2204927.html