Question

当发生某些事情时，我将正文background-color设置为灰色并减少opacity。然而，这显然也会改变按钮的不透明度。

我想要实现的是当动作发生时，改变除按钮之外的所有内容的不透明度。

var highlight = $('#' + scroll).closest('div').find('button');
$('body').css('opacity', '0.2');
$('body').css('background-color', 'grey');
$(highlight).css('background-color', '#FDFF47');
$(highlight).css('opacity', '1');

怎么办呢？

Answer 1

在background-color中使用rgba()将不透明度仅降低到背景。 opacity属性。

$('body').css('background-color', 'rgba(128, 128, 128, 0.5)');

关于rgba（R，G，B，A） - https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#rgb()_and_rgba()

Answer 2

当您尝试使用background设置opacity时使用rgba代表红色，蓝色，绿色和不透明度（Alpha），您可以将最后一个参数作为不透明度传递。使用background: rgba(0,0,0,0.2)代替background-color: grey。请查看下面的代码段以供参考。

div {
  background-color: rgba(0, 0, 0, 0.2);
  padding:50px;
}

p {
  color: blue;
}

<div>
  <p>My Text</p>
</div>

Answer 3

您可以使用Alpha值设置背景颜色，而不是设置不透明度：

$('body').css('background-color', 'rgba(192,192,192,0.2)');

Answer 4

尝试使用此jquery code

＆＃13;

$(document).ready(function() {
  $("#btn").hover(function() {
    $("#btn").css('background-color', 'grey');
    $("#btn").css('opacity', '0.5');
  });
});

＆＃13;

#btn {
  border: none;
  padding: 10px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btn">test</button>

＆＃13;

Answer 5

当您在评论中写下问题时，如果您正在寻找网址更改，建议您查看this question。

相反，如果你正在寻找执行代码，当div位于HTML页面之上时尝试这样的事情：

$(document).on('scroll', function(){
    if($('your_div').offset() == 0){
        //do stuff when your_div is on top of the page
    }
})

此代码侦听页面滚动，当你的div从页面顶部偏移0px时，它执行if语句中的代码

修改的
如果你执行此操作$(body).css('opacity', '0.2')，则为正文中的所有人设置不透明度（特别是对于所有<body>的孩子）。要仅为某些元素设置不透明度，您必须做一些棘手的事情：您必须使用具有相同类的div包装这些元素，然后为该类设置不透明度。

即：假设您使用div为opacity的div包装该元素，如果执行$('.opacity').css('opacity', '0.2')，则只有这些div中的元素的不透明度设置为0.2。

除按钮外，在js中设置背景颜色+不透明度

5 个答案: