修复了需要透明度的标头

Fixed header needing transparency

本文关键字：透明度      更新时间：2023-09-26

我的页眉有一个div，它使用了position:fixed在css中的位置来保持原位。然而，当滚动的内容在div（div的背景使用#颜色）下面时，我想在div上添加一些透明度

CSS可以做到这一点吗？我的赌注是某种JavaScript（也许是jQuery）？我对JS不是很熟悉，任何例子都很好。

谢谢你，安德烈。

附言：我没有使用任何图片作为页面背景或标题。

您可以通过在div上设置opacity来实现这一点。值0-1越低，div就越透明。

jQuery

$('#divID').css('opacity','.4');

它可以在普通css中完成，也可以在中完成

#divId {
    opacity:.4;
}

更新

如果你只想让你的标题在滚动时是透明的，你需要使用jQuery:做这样的事情

$(window).scroll(function() {
    $('#divID').css('opacity','.4');
    clearTimeout($.data(this, 'scrollTimer'));
    $.data(this, 'scrollTimer', setTimeout(function() {
        $('#divID').css('opacity','1');
    }, 250));
});

更新2

如果您只想在窗口向下滚动时使页眉透明。

$(window).scroll(function() {
    if($(this).scrollTop() == 0)
        $('#divID').css('opacity','1');
    else
        $('#divID').css('opacity','.4');
});

示例

http://jsfiddle.net/VZU9K/

要在背景上设置不透明度，需要使用rgba而不是十六进制代码作为背景颜色。你可以用css：

#div {
  background-color: rgba(0, 0, 0, .4);
}

前三个数字是红色、绿色、蓝色，范围从0到255，最后一个数字是不透明度，范围从.0（0%）到1（100%）。

对于从十六进制代码到rgb的快速转换，我通常使用以下网站：http://www.javascripter.net/faq/hextorgb.htm

Josh

您可以在该div的css中设置以下背景颜色。0.7是不透明度值。

背景色：rgba（200200200,0.7）；

您可以使用不透明度：

/* Note that opacity will apply to all descendant elements as well, */
/* so all your links/text/logo will inherit the opacity value as well.*/
.header {
    opacity: 0.5;
}

或者仅使用HSLA或RGBA使背景半透明。

.header {
    background: #F00F00; /* background color for <IE8 */
    background: hsla(100, 50%, 50%, 0.5); 
    /* the last value (0.5) determines the opacity */
}
相关文章：