html背景图片底部有白色框,fullpage中插入背景图片和背景视频中间会有白色边框...

HTML

欢迎使用360极速

论坛

扩展

Mac版

畅快浏览 极致体验

极速

chromium78全新内核

性能强劲，快如闪电。

极酷

暗夜炫黑模式

定义酷，定义你。

极安全

DNS加密防劫持

安全升级，肆意无忌。

极视界

4K高清视频播放

还原真实之美，尽显万物本色。

js

window.onload = function () {

new fullpage('#fullpage', {

//options here

sectionsColor: ["black"],

navigation: true,

verticalCentered: false,

afterLoad: function (origin, destination, direction) {

if(origin !== null){

origin.item.className = origin.item.className.replace("current", "");

}

destination.item.className = destination.item.className + " current";

}

});

}

less

/*头部导航栏*/

.header{

width: 100%;

height: 48px;

position: fixed;

top: 0;

left: 0;

z-index: 999;

user-select: none;

.header-content{

width: 1200px;

height: 100%;

margin: 0 auto;

box-sizing: border-box;

overflow: hidden;

.logo{

margin-top: 10px;

}

.linkBox{

float: right;

a{

margin-left: 40px;

line-height: 48px;

text-decoration: none;

color: #A4A4A4;

}

}

}

}

/*样式混合*/

.sectionStyle(){

position: relative;

.info{

position: absolute;

left: 19%;

top: 33%;

.text{

color: white;

margin-bottom: 40px;

span:nth-of-type(1){

font-size: 60px;

}

span:nth-of-type(3){

display: inline-block;

font-size: 50px;

margin: 10px 0;

}

span:nth-of-type(4){

font-size: 20px;

}

.line{

display: inline-block;

width: 30px;

height: 1px;

border: 1px solid rgb(94,94,94);

box-sizing: border-box;

}

}

.btn{

width: 200px;

height: 48px;

background: url(./../images/expBtns.png) 0 0 no-repeat;

cursor: pointer;

&:hover{

background: url(./../images/expBtns.png) -200px 0 no-repeat;

}

}

opacity: 0;

transition: all 1s linear 0s;

}

&.current{

.info{

opacity: 1;

}

}

}

/*第一屏*/

.section-one{

position: relative;

background: url("./../images/1.jpg") no-repeat center center;

.info{

width: 1200px;

height: 200px;

position: absolute;

top: 20%;

left: 50%;

transform: translateX(-50%) translateY(-50%);

text-align: center;

user-select: none;

p{

font-size: 60px;

letter-spacing: 2px;

color: #fff

}

}

.btn{

width: 300px;

height: 60px;

background: url(./../images/expBtn.png) 0 0 no-repeat;

position: absolute;

top: 30%;

left: 50%;

transform: translateX(-50%) translateY(-50%);

cursor: pointer;

&:hover{

background: url(./../images/expBtn.png) -300px 0 no-repeat;

}

}

.leftPlanet{

position: absolute;

left: 20%;

top: 20%;

animation: planetSport 2s linear infinite alternate;

//transform: translateY(50px);

//transition: all 4s linear 0s;

}

.rightPlanet{

position: absolute;

right: 13%;

bottom: 10%;

animation: planetSport 2s linear infinite alternate;

//transform: translateY(50px);

//transition: all 5s linear 0s;

}

/*&.current{

.leftPlanet{

//transform: none;

animation: planetSport 2s linear infinite alternate;

}

.rightPlanet{

//transform: none;

animation: planetSport 3s linear infinite alternate;

}

}*/

}

/*第一屏动画*/

@keyframes planetSport {

from{

transform: translateY(50px);

}

to{

transform: none;

}

}

/*第二屏*/

.section-two{

.sectionStyle();

}

/*第三屏*/

.section-three{

.sectionStyle();

}

/*第四屏*/

.section-four{

.sectionStyle();

}

/*第五屏*/

.section-five{

.sectionStyle();

}

问题截图

在新标签页中打开这张图片会看的更清楚白色的细边框