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/p/2204927.html