前端06

backgrounnd属性

background-color 设置背景颜色
background-image 设置背景图片地址
backgroun-repeat设置背景图片如何重复平复
background-position 设置背景图片的位置
background-attachment 设置背景图片是固定还是随着页面滚动

比如：background :#00ff00url(image.gif)
no-repeat”是设置background-repeat；“left center”是设置background-position；“fixed”是设置background-attachment，各个设置项用空格隔开，有的设置项不写也是可以的，它会使用默认值。

background:url(bg.jpg)”，默认设置一个图片地址，图片会从盒子的左上角开始将盒子铺满。



“background:cyan url(bg.jpg) repeat-x”，横向平铺盒子，盒子其他部分显示背景颜色“cyan”。


background:cyan url(bg.jpg) repeat-y”，纵向平铺盒子，盒子其他部分显示背景颜色“cyan”



、“background:cyan url(bg.jpg) no-repeat”，背景不重复，背景和盒子左上角对齐，盒子其他部分显示背景颜色“cyan”。



“background:cyan url(bg.jpg) no-repeat left center”，背景不重复，背景和盒子左中对齐，盒子其他部分显示背景颜色“cyan”。


background:cyan url(bg.jpg) no-repeat right center”，背景不重复，背景和盒子右中对齐，也就是背景图片的右边对齐盒子的右边，盒子其他部分显示背景颜色“cyan”。

代码中使用到的背景图片，可以直接在页面上的背景图片上点右键另存下来，命名为：“bg.jpg”，并且和网页文件存在同一个目录下。

背景图片默认是贴着元素的左上角显示
            通过background-position可以调整背景图片在元素中的位置
            可选值：
                该属性可以使用 top right left bottom center中的两个值来指定一个背景图片的位置
                top left 左上
                bottom right 右下
                如果只给出一个值，则第二个值默认是center
            也可以直接指定两个偏移量
                第一个值是水平偏移量
                    - 如果指定的是一个正值，则图片会向右移动指定的像素
                    - 如果指定的是一个负值，则图片会向左移动指定的像素
                第二个是垂直偏移量
                    - 如果指定的是一个正值，则图片会向下移动指定的像素
                    - 如果指定的是一个负值，则图片会向上移动指定的像素


                scroll，默认值，背景图片随着窗口滚动
                fixed，背景图片会固定在某一位置，不随页面滚动
            不随窗口滚动的图片，我们一般都是设置给body，而不设置给其他元素

做完功能以后，发现在第一次切换图片时，会发现图片有一个非常快的闪烁，这个闪烁会造成一次不佳的用户体验

    产生问题的原因：
        背景图片是以外部资源的形式加载进网页的，浏览器每加载一个外部资源就需要单独的发送一次请求
        但是我们的外部资源并不是同时加载，浏览器会在资源被使用时才去加载资源
        我们这个练习，一上来浏览器只会加载link.png
        由于hover和active的状态没有马上触发，所以hover.png和active.png并不是立即加载的
        当hover被触发时，浏览器才去加载hover.png
        当active被触发时，浏览器才去加载active.png
        由于加载图片需要一定的时间，所以在加载和显示过程会有一段时间，背景图片无法显示，导致出现闪烁的情况

    为了解决该问题，可以将三个图片整合为一张图片，这样可以同时将三张图片一起加载，就不会出现闪烁的问题了
    然后再通过background-position来切换要显示的图片的位置，这种技术叫做图片整合技术（CSS-Sprite）
    优点：
        1 将多个图片整合为一张图片里，浏览器只需要发送一次请求，可以同时加载多个图片，提高访问效率，提高了用户体验。
        2 将多个图片整合为一张图片，减小了图片的总大小，提高请求的速度，增加了用户体验
有一些情况下表格是非常的长的，这时就需要将表格分为三个部分，表头，表格的主体，表格底部
        在HTML中为我们提供了三个标签：
            thead 表头
            tbody 表格主体
            tfoot 表格底部
            
        这三个标签的作用，就来区分表格的不同的部分，他们都是table的子标签，都需要直接写到table中，tr需要写在这些标签当中
            
        thead中的内容，永远会显示在表格的头部
        tfoot中的内容，永远都会显示表格的底部
        tbody中的内容，永远都会显示表格的中间
        
        如果表格中没有写tbody，浏览器会自动在表格中添加tbody
        并且将所有的tr都放到tbody中，所以注意tr并不是table的子元素，而是tbody的子元素
        通过table > tr 无法选中行 需要通过tbody > tr
雪碧图的优缺点。



优点: 图片变成一张肯定所占位置更少，减少加载时间，增强用户体验；作为设计师来说不用对各种小图标命名，减少工作量，再一个就是对风格的更改整体操作来说更为简便。

 缺点：背景大小，容易出现断裂，相比之下不是直接替换照片，而是利用PS来测量好每一个的位置，环节繁琐一些，当然更改部分元素的同时需要动整体，也比较麻烦一些。