CSS样之背景（一）

              **背景：它支持为元素添加背景颜色和背景图片。**

（作者：小雨妖妖 撰写时间：2019.1.18 开发工具与关键技术：DW/CSS中的Backgound)

    接下来介绍下背景相关的属性（理论知识）

(1)Background-color:背景颜色

(2)Background-image:用于设置背景图片。
注意:如果同时设置背景颜色(background-color)和背景图片(background-image),
背景颜色会被背景图片覆盖。
该属性需要用URL()含数指定图片地址,图片的地址既可以是相对的也可以是绝对的。

(3)Background-repeat:用于设置对象的背景图片是否平铺(重复显示).在指定该属性之前, 必须先指定背景图片(background-image)。
该属性有4个值：
repeat(纵横同时重复),
no-repeat(不重复),
repeat-x(x轴方向重复),
repeat-y(y轴方向重复)

(4)Background-position:用于控制图片的位置。
Background-position有5个关键值分别是:top、left、botton、right、center。
可以通过任意两个关键字组合来定位 也可以通过百分比来定位。
例如:background-position:50% 50%。
第一个百分比对应横坐标,第二个百分比对应纵坐标。

(5)Background-attachment:设置背景图片是随对象内容滚动还是固定。
在指定该属性之前,必须先指定背景图片。
该属性两个值:scroll(默认) fixed(固定)。

(6)Background:这是一个复合属性,可以同时设置背景颜色,背景图片,背景重复,背景位置等。

  现在呢  我们就来 实操一下
                以下的代码呢就是整个过程
        1.首先我们来创建一个HTML,给它title直接在html里写style样式
          注： <style type="text/css"></style>此样式呢就是来引用CSS样式的
        2.其次呢，我们就给它两个类（one  和  two）两个盒子
           *这里涉及到一点点的边框样式，这样效果更美观一些*
         3.重点来了：
                  （1） backgound-repeat-x:repeat-x(x轴方向重复)这样图片就看到倒影两面！
                  （2） backgound-position:center(控制图片的位置:在盒子的中心)  
                  （3） backgound-attachment:fixed(背景图是固定的)这样就相对于第一张照片它是固定的

第一张图片就很明显看到了倒影两面

这里就盒子过大导致照片呈现出四张照片的效果
这样的效果其实也是一种另类的美哦

《完》