Question

我通过JavaScript动态创建了具有background-color: rgba(219, 219, 40, 1);背景的对象，并带有内容。

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

我只能用CSS做什么？

Answer 1

您可以像rgb（219,219,40）或HEX＃DBDB28一样保存颜色并单独更改不透明度：

＆＃13;

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

＆＃13;

<div class="main">

</div>

＆＃13;

更新：尝试将不同div中的内容和背景分开

＆＃13;

.main{
  position: relative;
  height: 100px;
  width: 100px;
}
.background{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #DBDB28;
  opacity: .3;
}
.content{
  position: absolute;
  color: #000000;
  background-color: #0099ff;
  opacity: .9;
  top: 0;
  left: 0;
}

＆＃13;

<div class="main">
  <div class="background">
  </div>
  <div class="content">
    some text
  </div>
</div>

＆＃13;

如果这不是您的意思，请显示代码示例

Answer 2

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

2 个答案: