我正在尝试将图像作为背景淡出,我只想淡出背景图像而不是文本。 我想将文本留在页面上。 这是我使用的:
https://codepen.io/nickcil/pen/sfutl
请帮帮我
$(window).scroll(function(){
$(".top").css("opacity", 1 - $(window).scrollTop() / 250);
});
/*win.scroll(function(){
scrollPosition = win.scrollTop();
scrollRatio = 1 - scrollPosition / 300;
$(".top").css("opacity", scrollRatio);
*/
/*$(window).scroll(function(){
var scrollVar = $(window).scrollTop();
$('.top').css("opacity", 1 - scrollVar/300);
})*/
body {
margin: 0;
height: 1000px;
}
.top {
margin: 0;
position: relative;
width: 100%;
background-color: #aaa;
height: 300px;
opacity: 1;
text-align: center;
font-family: 'helvetica';
font-size: 80px;
font-weight: 100;
color: #fff;
}
.title {
position: absolute;
top: 60%;
left: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="top">
<div class="title">Fade Away</div>
</div>
最佳答案
opacity
影响元素内的所有内容,您必须使用 background-color
而不是 opacity
,因此:
变化:
$(".top").css("opacity", 1 - $(window).scrollTop() / 250);
收件人:
$(".top").css('background-color', 'rgba(170,170,170,' + (1 - ($(window).scrollTop() / 250)) + ')');
$(window).scroll(function(){
$(".top").css('background-color', 'rgba(170,170,170,' + (1 - ($(window).scrollTop() / 250)) + ')');
});
body {
margin: 0;
height: 1000px;
}
.top {
margin: 0;
position: relative;
width: 100%;
background-color: #aaa;
height: 300px;
opacity: 1;
text-align: center;
font-family: 'helvetica';
font-size: 80px;
font-weight: 100;
color: #fff;
}
.title {
position: absolute;
top: 60%;
left: 100px;
color: #000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="top"><div class="title">Fade Away</div></div>
注意:我将 .title
的 color
更改为黑色,以便您更好地查看结果。
关于javascript - 淡出仅背景图像而不是文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47817892/