Question

我的头部有一个div，它使用位置：固定在css中以保持原位。但是，当滚动内容在div下时，我想在div（div的背景，使用#color）上添加一些透明度。

CSS可以吗？我的赌注是某种JavaScript（也许是jQuery）？我不熟悉JS，任何一个例子都会很棒。

谢谢，安德烈。

PS：我没有在页面背景或标题中使用任何图像。

Answer 1

您可以通过在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/

Answer 2

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

来做到这一点

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

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

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

约什

Answer 3

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

background-color：rgba（200,200,200,0.7）;

Answer 4

您可以使用不透明度：

/* 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 */
}

固定标头需要透明度

4 个答案: