通过JavaScript更改身体不透明度

nsunt 发布于 2019-03-09 css 最后更新 2019-03-09 14:34 0 浏览

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

<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/
已邀请:

dipsam

赞同来自:

尝试这个

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

jsed

赞同来自:

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;
}

laut

赞同来自:

我不是一个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。