/*黑色屏幕父容器*/ .barrage .screen { width: 100%; height: 100%; /*绝对定位设置 上边0px右边0px*/ position: absolute; top: 0px; right: 0px; } /*退出符号*/ .barrage .screen .s_close { /*图像显示的前后越小越靠后*/ z-index: 2; top: 20px; right: 20px; position: absolute; /*默认定义标准文本*/ text-decoration: none; width: 40px; height: 40px; /*定义圆角形状*/ border-radius: 20px; /*文本居中对齐*/ text-align: center; color: #fff; background: #000; /*设置行间的距离 //没有什么用可以删除*/ line-height: 40px; /*此元素不会被显示*/ display: none; } /*黑屏子容器*/ .barrage .screen .mask { /*相对定位*/ position: relative; width: 100%; height: 100%; background: #000; /*设置透明的级别*/ opacity: 0.5; /*IE8以及更早的浏览器设置的不透明属性*/ filter: alpha(opacity: 1); z-index: 1; } .barrage { display: none; width: 100%; height: 100%; } .barrage .screen .mask div { position: absolute; /*弹幕的字体的大小*/ font-size: 20px; /*定义粗体字符*/ font-weight: bold; /* 规定段落文本不换行*/ white-space: nowrap; line-height: 40px; z-index: 40; } .barrage .send { z-index: 1; width: 100%; height: 6%; background: #000; position: absolute; /*低端0px*/ bottom: 0px; /*浏览器设置左边边距*/ margin-left: auto; /*浏览器设置右边边距*/ margin-right: auto; /*把文本排列到中间*/ text-align: center; } .barrage .send .s_text { width: 79%; height: 90%; line-height: 10px; font-size: 20px; /*上下边距为零*/ margin: 0 auto; /*字体样式*/ font-family: "微软黑体"; } .barrage .send .s_btn { margin: 0 auto; width: 18%; height: 90%; background: #22B14c; color: #fff; }