更改现有彩色对象的背景不透明度

Question

我用JavaScript动态创建了背景颜色为＜code＞的对象：rgba（219219，219，40，1） ，带有内容。

对于其中的一些，我想编辑不透明度，rgba（）func的第4个参数。我不能添加全新的CSS设置，因为颜色会改变，我必须保存它。

我只能使用CSS做什么？

Answer 1

不幸的是，CSS中没有背景不透明度。您唯一能做的就是每次都使用rgba（），或者您可以创建具有相对位置的父元素，添加具有绝对位置的子元素并更改其不透明度，这不会影响内容：

*{
margin: 0;
padding: 0;
}

.parent{
width: 300px;
height: 200px;
position:relative;
}

.parent .bg{
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: #FF0000;
opacity: .5; /*Change opacity here dynamically*/
}
/*changing opacity of .bg will not affect .content*/
.parent .content{
  font-size: 14px;
  color: #0000FF;
  font-weight: bold;
  padding: 20px 30px;
}

<div class="parent">
  <div class="bg"></div>
  <div class="content">Lorem Ipsum</div>
</div>

Answer 2

您可以保存 rgb（219、219、40） 或十六进制等颜色#DBDB28并分别更改不透明度：

.main{
  height: 100px;
  width: 100px;
  background-color: rgb(219, 219, 40);
  opacity: .3;
}

html prettyprint-override"><div class="main">

</div>