Css学习笔记(三)

Css背景

css 可以添加背景颜色和背景图片，以及来进行图片设置。

 div
    {
        width: 400px;
        height: 500px;
        background-color: pink;
        background-image: url(images/Login.jpg);
        background-repeat: repeat-x;
    }

背景位置

语法

        /* 1，利用方位名字top bottom 来更改背景图片位置 */
        background-position: left top; /*默认的是左上角*/
        background: bottom right; /* 方位名字没有顺序 谁在前都可以*/
        background:left; /*方位名词只写一个另一个默认为center*/
        /* 2，精确单位 第一值一定是x坐标， 第二个值一定是y坐标 */
        background-position: 10px 30px;

        /* 3，混搭  */
        background-position: center 10px;
        /* center 10px 水平居中 垂直是10px */
        /* 10px center 水平10px  垂直是居中 */

设置对象位置必须先制定background-image默认值为（0% 0%）
如果只指定了一个值，该值将用于横坐标，纵坐标将默认为50%，第二个值将用于纵坐标

实际中工作用的最多的便是背景图片居中对齐

背景附着

语法

        background-attachment: scroll

背景简写

background属性的值的书写顺序 官方并没有强制标准，为了可读性
background：背景颜色 背景图片地址 背景平铺 背景滚动 背景位置

background: transparent url(image.jpg) repeat-x scroll 20% 0;

背景透明

css3支持背景半透明的书写语法格式是

 background:rgb(158, 83, 83,0.3)

最后一个参数是alpha透明度 取值范围是0-1 之间
注意 ：背景半透明是指盒子背景半透明，盒子里面的内容不受影响。
同样，可以给文字和边框透明 都是用rgba格式来写。

 border: 1px solid rgb(158, 83, 83,0.3)
 color: rgb(158, 83, 83,0.3)

背景缩放

通过background-size 设置背景图片的尺寸，就像我们设置img的尺寸一样，在web开发中做屏幕适配应用非常广泛，设置如下

 	background-image: url(image/logo.jpg);
    background-size: 300px,100px;
    background-size: contain;
    background-size: cover

1，可以设置长度单位 （px) 或者百分比 (设置百分比时，参照盒子的宽高)
2，设置为cover时，会自动调整缩放比例，保证图片始终填充满背景区域，如有溢出部分则会被隐藏。 平时用cover最多
3，设置为contain时 会自动调整缩放比例， 保证图片始终完整显示在背景区域，这个可以保证图片等比例缩放，不会缺失，但是有部分裸露

多背景

以逗号分割可以设置多背景，可用于自适应布局

 background-image: url(image/logo.jpg),url(image/logo2.jpg);

1，一个元素可以设置多种背景图像。
2，如果设置的多重背景图之间存在着交集(有重叠关系)，前面的背景图会覆盖在后面的背景图之上。
3，为了避免背景色将背景图盖住，背景色都通常定义在最后一组上

文字凹凸效果

1，凹凸效果的做法，其实就是上面 左边白色阴影，右边下面黑色阴影

/* text-shadow: 水平位置  垂直位置  模糊距离 阴影颜色 */
    text-shadow: 1px 1px 1px #000000, -1px -1px 1px #ffffff;