CSS白色层干扰

我有一个网站，有一个幻灯片播放和社交分享图标。当您滚动到页面底部并单击社交分享按钮上方的滑动框时（发生在这两者相互关联时），第一层白色图层出现在滑动面板上，并在滚动后消失。这只发生在铬和歌剧。 website和full css code。下面是执行此操作的特定代码。CSS白色层干扰

.socialPlugin .socials .fa { 
    height: 2.5em; 
    font-size: 2em; 
    overflow: hidden; 
    position: relative; 
    text-decoration: none; 
    width: 2.5em; 
    -webkit-backface-visibility: hidden; 
} 

.socialPlugin .socials .fa:before, .socialPlugin .socials .fa:after { 
    left: 0; 
    position: absolute; 
    text-align: center; 
    -webkit-transition: 0.5s; 
    transition: 0.5s; 
    top: 50%; 
    width: 100%; 
}

来源

2016-07-25 Max Njoroge

链接页面上没有社交分享按钮，也不清楚您所称的“滑动框”或“滑动面板”。请编辑您的问题以包含[mcve]。 – Shaggy

更正...内容在一天过去时发生变化 –

它必须在晚上离线，因为我收到了404 – TheThirdMan

刚刚测试过这一点，这里是你的修复。

.slide-over.open .cd-fixed-bg{ 
    opacity:0; 
} 

.slide-over.open[style="right: 0px;"] .cd-fixed-bg{ 
    opacity:1; 
}

专门针对当面板击中0px时。

来源

2016-08-10 01:55:01

加入'.open'类'$（ '身体'）追加（ “

" + " " + "

” + “

" + "

” ）;'谢谢！ –

但仍然在歌剧中的故障 –

好像替换

.cd-fixed-bg.cd-bg-1{ 
    background-image: url("../img/slideover/cd-background-2.jpg"); 
}

为

.cd-fixed-bg.cd-bg-1{ 
    background: url("../img/slideover/cd-background-2.jpg"); 
}

解决了这个问题。

来源

2016-07-25 10:12:14 polamoros

是吗？因为它确实不应该。你能解释为什么使用速记在这里应该改变任何东西吗？ – TheThirdMan

看起来它与'background-attachment：fixed;'有关。禁用此属性会导致背景在“滑动面板”被触发时按预期显示。但是，当用户向下滚动时，会丢失背景图片的效果。理想的解决方案可能涉及仅在滑动完成转换后设置'background-attachment：fixed;'。 –

这确实解决了这个问题，但是我希望图像因为它创建的效果而保持不变:) –

尝试处理“slideover1”的方式与您在“幻灯片放映”中已经存在的方式相同，并将其从隐藏变为可见。

我相信你的问题可能是因为“slideover1”的创建只发生在你第一次按下按钮后，不允许它在加载时呈现。

这是我偷偷摸摸的嫌疑，仍然搞乱了代码以查看任何其他潜在的问题。

<div class="slide-over open" style="right: 0px;"><a href="#" data-slideover="close" class="close-x"><span class="icon-cross"></span></a> 
 
    <div id="slideover1" class="slideover-content"> 
 
\t  <div class="cd-main-content"> 
 
\t \t \t <div class="cd-fixed-bg cd-bg-1"> 
 
\t \t \t \t <h1>Chill Out Mondays</h1> 
 
\t \t \t </div> 
 
\t \t \t <div class="cd-scrolling-bg cd-color-2"> 
 
\t \t \t \t <div class="cd-container"> 
 
\t \t \t \t \t <p>You really don't have to know how to dance, just stand there. Move your head to the beat. Not bad, okay now a 1, 2 step with your feet. Whoa! Talk about a natural. Lingala, perfect way to let your body do the talking. Every Monday. Good music, Beautiful people.</p> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t \t <div class="cd-fixed-bg cd-bg-2"> 
 
\t \t \t \t <h2>Happy Hour Mondays</h2> 
 
\t \t \t </div> 
 
\t \t \t <div class="cd-scrolling-bg cd-color-3"> 
 
\t \t \t \t <div class="cd-container"> 
 
\t \t \t \t \t <p>Bet you woke up today like, damn, another Monday. No worries, how was work today? Don't wanna talk bout it? Ok. So what do you have planned for tonight then? Yup guessed it, huna plot. Again no worries, you need to rest, no chill. Lounge at Latitude and have yourself an easy Monday.</p> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t \t <div class="cd-fixed-bg cd-bg-3"> 
 
\t \t \t \t <h2>Mindful Mondays Twist</h2> 
 
\t \t \t </div> 
 
\t \t \t <div class="cd-scrolling-bg cd-color-1"> 
 
\t \t \t \t <div class="cd-container"> 
 
\t \t \t \t \t <p>As we wind up the day, you suddenly think to yourself, today was either pretty average or pretty stressful. Don't know about you but I like constant happy vibes to take all the stress outta my day. A couple of close friends mixed with a couple of drinks and welcome to a chilled out Monday.</p> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t \t <div class="cd-fixed-bg cd-bg-4"> 
 
\t \t \t \t <h2>Rhumba &amp; Lingala</h2> 
 
\t \t \t </div> 
 
\t \t </div> 
 
    </div></div>

来源

2016-08-09 12:52:06 Adam

好主意，但是这将是一个太多的代码来改变和影响会稍微改变。 –

CSS白色层干扰

回答

相关问题