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、这个是什么新鲜的东西？？
