css008 给网页添加图片

css008 给网页添加图片

1、 css和<img>标签

1、<img>标签是html的添加图片的标签，一般为：

<img src=”url.jpg” href=”describtion of the picture”>

2、css中添加图片：？

3、经常用来处理图片的css属性：

A、border（边框）：每条边框都可以设置不同的颜色样式和宽度

B、padding（填充）：在边框和图片之间添加空间，空间中可以设置背景色等各种属性

C、float（浮动）：可以将图片浮动到相应布局的左侧或者右侧。可以多张图片一起浮动。

问题：word文档的图片也有一个浮于文字上方的设置，它是不占据空间的，一般它周围的东西会自动排在照片底部。这里的浮动好像是占据空间的，它周围的东西只会排在它周围。

D、margin（边距）：图片和其他网页元素之间的距离。

E、对图片添加样式，一般只对其中部分图片添加样式，所以一般用类样式。

2、 添加背景图片

1、在css中添加背景图片：

background-image：url（图片地址） no-repeat；

2、可以创建一张背景图片包含所有需要的背景图片（这样可能会不太好的样子吧）

body{ background-image：url（images/bg.gif） }

路径可以是相对于文档的路径，也可以是相对于根目录的路径

现对于文档：url（../images/bg.gif）

相对于根目录：url（/images/bg.gif）

3、 控制重复

1、no-repeat

2、问题：可以控制什么东西重复，可以控制画两条border线吗？哪些东西可以重复，哪些东西不能重复？？

3、重复有什么好处？可以得到什么样的效果？？

4、background-repeat 属性指定图片要如何平铺或者不平铺

background-repeat属性接受四个值：

repeat：默认设置，从左往右，从上往下平铺填满指定空间

no-repeat：只显示图片一次，不做任何重复

repeat-x：沿x轴方向平铺，可用于做横幅之类的东西

repeat-y：沿y轴方向平铺，可以在网页元素任意一边添加阴影

4、 定位背景图片

1、定位背景图片：position：0 0；（后面跟的值为需要的图片在整张背景图片中的相对位置）

2、定位背景图片可以带来什么样的方便

3、可以空过不同方法设置图片的水平和垂直方向的起点：keyword 精确值 percentage

4、background-position：left/right/center left/right/center；

5、background-position：20px 20px；

6、background-position：50% 50%；（这个50%是相对于谁的？？）

7、该属性的三个值可以混用。

8、如何固定图片：background-attacment属性

该属性可以有两个值：scroll（滚动） fixed（固定）

body{ background-image：url（images/logo.gif）;

background-repeat: no-repeat;

background-attacment:fixed; }

9、定位背景图片的background-origin和background-clip

调整图片的起点 限制背景图片的区域

background-origin：border-box(图片显示在border区域左上角)；

padding-box（图片显示在padding区域左上角）

cntent-box（图片显示在内容区域右上角）

background-clip：border-box(背景图片显示在border区域)；

padding-box（背景图片padding区域）

cntent-box（背景图片显示在内容区域）

10、 缩放背景图片：background-size：100px 200px；

可以设置为：background-size：100px auto；

background-size：100% 100%；

11、 background-size：contain；迫使图片根据相应元素进行大小的调整，保持原来的长宽比进行伸展。

12、 background-size：cover；迫使图片根据相应元素进行大小的调整，保持原来的长宽比进行收缩。

5、 利用background快捷属性

1、background后面可以跟多个值，都是什么？

2、像font属性的快捷方式一样使用，一般不要这样写，太乱了。还有background的各种不同属性比如background-color和background在css中的顺序一定要注意。会产生覆盖。

3、background: url(../images/tell.png) no-repeat left; （在一个background里面可以写各种信息，比如颜色，背景图片，背景图片位置等）

6、 使用多个背景图片

1、使用多个背景图片是把图片叠加的意思吗，图片叠加得到特定效果，或者特定形状组合？？

2、多张图片导入，并设置不同的重复方式以及不同的样式

7、 使用渐变色背景

1、使用渐变色，怎么使用？哪些语句？

2、线性渐变

background-image：linear-gradient（left black white）；

（元素从左边开始以黑色开始到右边以白色结束。Black和white是关键字，可以用确定值或者rgb（）来表示。里面的颜色可以添加多个）

3、颜色站：用百分数 确定值来控制颜色变化的位置

background-image：linear-gradient（left,black 20%, white 80%）；

4、重复线性渐变

background-image：repeating-linear-gradient（bottom left,black 20%, white 80%）；

5、径向渐变

background-image：radial-gradient（red blue）;(椭圆形渐变)

background-image：radial-gradient（circle red blue）;(圆形渐变)

径向渐变的尺寸：closest-side（从中心一直延伸到离中心最近边位置）

closest-corner（从中心点到最近的元素角的距离）

farthest-side（用于测量半径，从中心点到元素最远边的距离）

farthest-corner（用于测量半径，从中心点到元素最远角的距离）

6、重复径向渐变

和线性渐变一样，径向渐变可以设置重复

8、 用colorzilla轻松创建渐变

1、这个是什么新鲜的东西？？