如何使用javascript更改背景(而非文本）颜色不透明度

How to change background (not text) color opacity with javascript?

本文关键字：文本 颜色 不透明度 javascript 何使用 背景      更新时间：2023-09-26

我想采用div元素的现有背景色，只调整不透明度。。。我该怎么做？

找到了解决我问题的简单方法；需要jquery颜色插件，但在我看来这是迄今为止最好的解决方案：

$('#div').css('backgroundColor', $.Color({ alpha: value }));

Opacity很棘手，因为仍然没有跨浏览器支持的机制，即使它应该在CSS3中。

您最可能想要做的是更改background-color样式的alpha通道。请参阅：http://robertnyman.com/2010/01/11/css-background-transparency-without-affecting-child-elements-through-rgba-and-filters/

有人开发了一个JQuery插件，它可以满足您的需求：http://archive.plugins.jquery.com/project/backOpacity

使用此插件，您可以在不影响子元素的情况下仅控制"背面不透明度"。

查询颜色插件是一个不错的解决方案，但是我坚信您不需要用不必要的插件来重载您的应用程序来完成如此简单的任务。

以下是使用字符串的另一种方法：

var alpha = "0.8";
var oldBGColor = $('#div').css('backgroundColor');
// rgb(40,40,40)
var newBGColor = oldBGColor.replace('rgb','rgba').replace(')', ','+alpha+')'); 
// rgba(40,40,40,.8)
$('#div').css('backgroundColor', newBGColor);

这里有一个jsFiddle如何使用它的例子。

我遇到了一个类似的问题，这对我来说很神奇。

如果你想从不透明度x.xxx变为1，你可以进行

var element = $("#id")
element.css('backgroundColor', element.css('backgroundColor').replace(/('d'.?'d*)'s*')/i, "1") )

要做相反的操作，只需将1更改为所需的值。

请注意，从开始，您的颜色需要具有"rgba（100，100，0.85098）"格式

在Photoshop中上传你的背景图像或颜色，降低那里的不透明性，将其保存为.jpeg图像，然后在HTML中用作背景。

就这么简单……：D

相关文章：