Как убрать белую линию между двумя делителями - PullRequest
Новая
       56

Как убрать белую линию между двумя делителями

0 голосов
/ 15 марта 2020

выродки! Вероятно, это просто вопрос ... но как я могу убрать эту "белую линию" или "разрыв" между двумя элементами одного цвета?

Проблема возникает только в том случае, если у меня один и тот же цвет фона в элементах div. Это не видно, когда я выбираю другой цвет. Вы можете увидеть этот разрыв при прокрутке.

Я пытался справиться с фоновым цветом и рамкой, но у меня это не работает или я делаю что-то не так .. 

html.fp-enabled,
.fp-enabled body {
    margin: 0;
    padding: 0;
    overflow:hidden;
    vertical-align: middle;
    background-color: #f2f2f2;
    /*Avoid flicker on slides transitions for mobile phones #336 */
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}

#sec1, #sec2{
background-color: #ac2022;
}

.section{
	text-align: center;
	align-items: center;
	justify-content: center;
  vertical-align: middle;
  position: relative;
  color: #fff;
}
body{
background-color: transparent;}

.fp-section {
    position: relative;
    -webkit-box-sizing: border-box; /* Safari<=5 Android<=3 */
    -moz-box-sizing: border-box; /* <=28 */
    box-sizing: border-box;
}
.fp-slide {
    float: left;
}
.fp-slide, .fp-slidesContainer {
    height: 100%;
    display: block;
}
.fp-slides {
    z-index:1;
    height: 100%;
    overflow: hidden;   
    vertical-align: middle;
    position: relative;
    -webkit-transition: all 0.3s ease-out; /* Safari<=6 Android<=4.3 */
    transition: all 0.3s ease-out;
}
.fp-section.fp-table, .fp-slide.fp-table {
    display: table;
    table-layout:fixed;
    width: 100%;
}
.fp-tableCell {
    display: table-cell;
    vertical-align: middle;
    width: 100%;
    height: 100%;
}
.fp-slidesContainer {
    float: left;
    position: relative;
}

.fp-auto-height.fp-section,
.fp-auto-height .fp-slide,
.fp-auto-height .fp-tableCell{
    height: auto !important;
}

.fp-responsive .fp-auto-height-responsive.fp-section,
.fp-responsive .fp-auto-height-responsive .fp-slide,
.fp-responsive .fp-auto-height-responsive .fp-tableCell {
    height: auto !important;
}

/*Only display content to screen readers*/
.fp-sr-only{
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
<script src="https://cdn.jsdelivr.net/npm/fullpage.js@3.0.8/dist/fullpage.min.js"></script>

<!DOCTYPE html>
<html lang="en" >
<head>
	<meta charset="UTF-8">
	<title></title>
	<meta name="description" content="website description...">
	<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>



<div id="fullpage">
		<div id="p1" class="page-section section">
					<div class="slide" id="sec1" data-anchor="slide1">
							<img src="" data-src="" />
							<h3>Section 1</h3>
							<a href=""><p class="view-more">See more</p></a>

					</div>
		</div>

		<div id="p2" class="page-section section">
					<div class="slide" id="sec2" data-anchor="slide1">
							<img src="" data-src="" />
							<h3>Section 2</h3>
							<a href=""><p class="view-more">See more</p></a>
					</div>
		</div>


		<div id="p2" class="page-section section">Some section</div>
		<div id="p3" class="page-section section">Some section</div>
</div>


<script type="text/javascript">


var myFullpage = new fullpage('#fullpage', {
	//Navigation
	menu: '#menu',
	lockAnchors: false,
	anchors:['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'fifthPage'],
	navigation: true,
	navigationPosition: 'right',
	navigationTooltips: ['01', '02', '03', '04', '05', '06',],
	showActiveTooltip: true,
	slidesNavigation: true,
	slidesNavPosition: 'bottom',

	//Scrolling
	css3: true,
	scrollingSpeed: 700,
	autoScrolling: true,
	fitToSection: true,
	fitToSectionDelay: 1000,
	scrollBar: false,
	easing: 'easeInOutCubic',
	easingcss3: 'ease',
	loopBottom: false,
	loopTop: false,
	loopHorizontal: true,
	continuousVertical: false,
	continuousHorizontal: false,
	scrollHorizontally: false,
	interlockedSlides: false,
	dragAndMove: false,
	offsetSections: false,
	resetSliders: true,
	fadingEffect: false,
	normalScrollElements: '#element1, .element2',
	scrollOverflow: false,
	scrollOverflowReset: false,
	scrollOverflowOptions: null,
	touchSensitivity: 15,
	bigSectionsDestination: null,

	//Accessibility
	keyboardScrolling: true,
	animateAnchor: true,
	recordHistory: true,

	//Design
	controlArrows: false,
	verticalCentered: true,
	sectionsColor : ['#ccc', '#fff'],
	paddingTop: 0,
	paddingBottom: 0,
	fixedElements: '#header, .footer',
	responsiveWidth: 0,
	responsiveHeight: 0,
	responsiveSlides: false,
	parallax: false,
	parallaxOptions: {type: 'reveal', percentage: 62, property: 'translate'},
	cards: false,
	cardsOptions: {perspective: 100, fadeContent: true, fadeBackground: true},

	//Custom selectors
	sectionSelector: '.section',
	slideSelector: '.slide',

	lazyLoading: true,

	//events
	onLeave: function(origin, destination, direction){},
	afterLoad: function(origin, destination, direction){},
	afterRender: function(){},
	afterResize: function(width, height){},
	afterReBuild: function(){},
	afterResponsive: function(isResponsive){},
	afterSlideLoad: function(section, origin, destination, direction){},
	onSlideLeave: function(section, origin, destination, direction){}
});

</script>

</body>
</html>
...