是否有一种方法可以在div背景/颜色上使用不透明度，而不会褪色里面的内容?

Question

我有下面的div，我想给内卡部分一个背景色，但淡化它，我对不透明度的经验是，它也会淡化里面的内容。我想知道是否有办法绕过这个效果。

<div class="container">
<div class="card">
<div class="inner-card">
<h5>Title</h5>
<p>Text</p>
<a href="">Link</a>
<div class="img-div">
<img src="../static/img/search.png" class="card-img" alt="">
</div>
</div>
</div>
.card{
display: flex;
flex-direction: column;
justify-content: end;
width: 350px;
height: 180px;
background: lightgreen;
border: 2px solid black;
margin-left: 8px;
margin-bottom: 8px;
}
.inner-card{
display: flex;
flex-direction: column;
justify-content: end;
background: orange;
}

Answer 1

最简单的方法就是给你的背景指定一个alpha色。如:

.inner-card {
/* other properties */
background:rgba(255,165,0,0.5)
}

你需要将你想要的颜色转换为RGB(红色=255，绿色=165，蓝色=0)，并添加一个alpha(在本例中为50%")。

Answer 2

background-color属性接受rgba颜色，其中不透明度是第四个参数，因此您可以

background-color:  rgba(255,165,0, opacity)

这里的rgb表示橙色，你可以用任何你想要的值替换不透明度

更多信息:https://www.w3schools.com/cssref/func_rgba.asp