css-伪类元素，背景，透明度，固定定位，粘性定位

在指定元素内部的最后面
p::after {
content: '哈哈哈';
color: red;
}
在指定元素内部的最前面
p::before {
content: '嘿嘿';
color: blue;
}

背景：
背景颜色  可以是颜色单词 可以是十六进制颜色 可以是rgb() 也可以是rgba()最后一个值是透明度
       /* background-color: blue; */
背景的图片  需要给一个图片的地址，图片默认是会平铺的 直到把容器铺满
      /* background-image: url(./avatar.jpg); */
背景的重复
   repeat-x：水平方向重复
repeat-y：垂直方向重复
no-repeat:不重复
      /* background-repeat: no-repeat; */
背景的大小  可以是两个值，分别是宽度和高度，也可以是百分比
       /* background-size: 100% 100%; */
       /* background-size: cover; */
      /* background-size: contain; */
                   cover:背景图片会进行缩放 直到短变撑满位置
          contain：背景图片会进行缩放 直到长边撑满盒子
背景图片的位置 两个值：分别是x轴和y轴，也可以是方位的单词
                        left top 如果第二个值不写默认就是center
          /*background-position: -95px -1030px; */
         /* background-position:center; */
背景的裁剪
            border-box:默认的 背景是从边框开始裁剪的
padding-box:从padding位置开始裁剪背景
content-box：从内容的区域开始裁剪
         /* background-clip:content-box; */
背景图片的起始
border-box:背景图片从边框开始填充
padding-box:背景从内边距开始填充 默认
content-box:背景从内容区域开始填充
       /* background-origin: padding-box; */
简写
background:url("./avatar.jpg") yellow no-repeat 1px 1px/200px 200px content-box border-box;
固定背景图片
/* background-attachment:fixed; */

背景图片和img的区别：
     1.img标签是会占据位置背景图片是不会占据位置
2.img标签样式只能通过其它属性来操作 ，背景图片是用自己提供属性来操作的
3.图片加载失败的时候 背景图片什么都不显示 img标签会裂开

垂直居中：
1.水平垂直居中第一套方案 如果不知道自己元素宽高是做不了的
     position: absolute;
left: 50%;
top: 50%;
margin-left: -50px;
margin-top: -50px;
2.水平垂直居中第二套方案 不用知道自己宽高是多少
     position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;

固定定位
1.固定定位会脱离文档流
2.固定定位永远是以浏览器窗口为基准的
        position: fixed;

粘性定位
给当前元素开启粘性定位 必须要有一个方向进行配合 相对定位和固定定位的结合体
     position: sticky;
bottom: 0;
top: 0;

透明度
背景颜色rgba也可以设置透明度 值也是0-1之间
    /*background-color: rgba(0, 0, 0, .6);*/
透明度 值在0-1之间 值越小越透明
   /* opacity: 0.6; */
rgba和opacity的区别
opacity 会透明子元素
rgba不会透明子元素 只会透明自己本身