Question

我有一个更改网站不透明度的滑块

<script type="text/javascript">
    $(document).ready(function() {        
        $('#slider').slider({ 
        min: 0, 
        max: 1, 
        step: 0.01, 
        value: 1,
        orientation: "vertical",
             slide: function(e,ui){
$('body').css('opacity', ui.value)
             }                
        })
    });
</script>

但我想不要改变我体内2或3级的不透明度。感谢。

LE：同时我想降低一些元素的不透明度，而不是它们我想要一个黑色面膜。所以在整个网站上只有.the_window和.the_trigger可见，背景黑色。例如：catalog-online.ro/test/

Answer 1

CSS opacity将适用于后代元素。由于您要更改<body>不透明度，因此会影响整个页面。您必须在页面上选择其他元素并更改其上的不透明度，避免您不希望更改不透明度的类。

修改：这是一个非常simple demo可能会有所帮助：

<强> HTML

<div id="main">Lorem ipsum, my opactiy is not affected</div>
<p>My opactiy is affected</p>
<div id="lightbox"></div>

<强> CSS

#lightbox {
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background-color:#000;
    opacity:.6;

}

#main {
    position:relative;
    background-color:#fff;
    z-index:1;
}

p {
    color:#f00;
}

Answer 2

我不是一个jquery家伙，但你可以在幻灯片功能中尝试这样的事情：

slide: function(e,ui){
   $('body').css('opacity', ui.value);
   $('#element_1_ID').css('opacity', 1);
   $('#element_2_ID').css('opacity', 1);
}

将element_1_ID和element_2_ID替换为您不想应用不透明度的元素的ID。希望它可能有效，否则另一种选择可能是设置单个元素的不透明度。将some设置为0，将some设置为1.

Answer 3

试试这个

document.getElementsByTagName("body").style.opacity = "0";

通过javascript更改正文不透明度

3 个答案: