CSS 背景 background属性 8-26

一、background-color:   ;   背景色

       1. 可以写色相、颜色；（比如red (红色)、blue (蓝色)）

       2. 可以写颜色编码； （比如：#ffffff）

       3. 可以写RGBA，A透明度的百分比（范围0-1），0.5就是半透明 background-color：189,162,143,0.5

       4. 直接写RGB 数值；

二、 background-image：url(图片的路径)；  背景图

三、 background-repeat：背景重复

四、 background-position： ；  背景定位    X轴   Y轴，可以写正负值、百分比、px和方位词；

        如果：background-position：100；意思是图片X轴从左往右移动100，Y轴默认居中 center。

五、 background-size ：  ；   背景图片的大小（可以写百分比、像素）

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css样式</title>
    <style>
        .box {
            width: 3000px; /*盒子的宽度*/
            height: 3000px;/*盒子的高度*/
            background-color: pink;  /*盒子的背景颜色*/
            background-image: url(02.jpg);  /*盒子的背景图片*/
            background-repeat: no-repeat;  /*背景图片是否重复：不重复*/
            background-position: 200px 500px;  /*背景图定位 X轴从左往右 200px。Y轴从上往下500px；Y轴不写的话默认center 居中,Y轴如果不想居中的话 直接写 0 就可以了*/
            background-size: 30%;  /*背景图的大小，以盒子的大小为依据，进行百分比缩放*/
        }
    </style>
</head>
<body>
    <div class="box">
        
    </div>
</body>
</html>

六、 background的缩写：

            background：颜色   图片  是否重复  定位/尺寸大小 (中间用空格隔开)；

            刚刚上面的例子就可以写：background：pink url(02.jpg) no-repeat 200px 500px/30%;

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css样式</title>
    <style>
        .box {
            width: 3000px; /*盒子的宽度*/
            height: 3000px;/*盒子的高度*/
            background:pink url(02.jpg) no-repeat 200px 500px/30%;/*background缩写：颜色 图片 是否重复 定位/尺寸大小*/
        }
    </style>
</head>
<body>
    <div class="box">
        
    </div>
</body>
</html>

七、：hover

         当鼠标划过时所展现的状态！

         color：transparent；  让文字的颜色变为透明，进而消失！

         transition：all 0.5s ease;

         all：是让所有的动画；

         0.5S ： 过渡时间；

         ease： 规定过渡效果的时间曲线。默认是 "ease"。

七、border-radius：50%

       在CSS3中是将4个角 角度变成50%，正方形就会变成正园！