logo标签列表

在JS中设置背景颜色和透明度，除了按钮以外

javascriptjqueryhtmlcss
7
当某些事件发生时，我将body的background-color设置为灰色并减少透明度。然而，这显然也会改变按钮的透明度。
我想要实现的是，当动作发生时，改变除按钮以外的所有元素的透明度。
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');

怎么做到这一点呢？

你是指HTML页面中的特定操作还是一般操作？ - Matteo Meil
基本上，当在 URL 中传递了 query =?scroll=value 时，它就会滚动到一个 div，其中 value 是要滚动到的 div 的 id。 - Przemyslaw Wojtas
5个回答
8

在 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()

rgba是CSS中的一种颜色值表示方式，其中R、G、B分别代表红、绿、蓝三原色的取值范围为0~255，A则代表颜色的透明度值，取值范围为0~1。

使用rgba可以在网页中添加透明效果的背景色、文字颜色等。例如：background-color: rgba(255, 0, 0, 0.5);表示添加一个透明度为0.5的红色背景色。

3

当您尝试使用opacity设置background时，请使用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>

0

尝试使用这个jQuery代码

$(document).ready(function() {
  $("#btn").hover(function() {
    $("#btn").css('background-color', 'grey');
    $("#btn").css('opacity', '0.5');
  });
});
#btn {
  border: none;
  padding: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btn">test</button>

0

与其设置不透明度，您可以使用 alpha 值设置背景颜色：

$('body').css('background-color', 'rgba(192,192,192,0.2)');
没有一个答案能够满足我的需求，rgba值已经设置在body上了，但是它并没有变暗以使按钮更亮，页面的其余部分也没有变暗。 - Przemyslaw Wojtas
@PrzemyslawWojtas 我猜你得到了这些相同的答案，因为问题的提问方式会导致这些答案。我可能会重新表述问题，并展示一些HTML，解释您想要在每个元素上实现的效果。 - Nick
我认为这并不难。将页面背景设置为灰色，除了按钮之外。当然，body是整个页面，但我想突出显示一个特定的按钮，以给用户一个提示“点击这里”。 - Przemyslaw Wojtas
0

根据您在问题评论中的描述，如果您想要监听URL更改，我建议您查看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中的所有元素（特别是所有<body>的子元素）设置不透明度。要仅为某些元素设置不透明度，您必须做一些棘手的事情：您必须使用相同类别的div将这些元素包装起来，然后为该类别设置不透明度。

例如：假设您使用一个类名为opacity的div包装该元素，如果您执行$('.opacity').css('opacity', '0.2')，则只有那些div中的元素的不透明度将被设置为0.2。

我已经让它工作了，在我的问题中，我正在询问如何设置body的背景颜色而不考虑按钮，因此设置background-color: whatever; 但不适用于按钮。 - Przemyslaw Wojtas
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接