使用线性渐变设置背景的不透明度[重复]答案

【问题标题】：Set opacity for background with linear gradient [duplicate]使用线性渐变设置背景的不透明度[重复]
【发布时间】：2023-02-02 18:08:27
【问题描述】：

我的问题如下：我有一个 div，它只是一个背景，里面还有其他标签。我将以下背景应用到 div：

background: linear-gradient(158.72deg, rgba(255, 255, 255, 0.4) 3.01%, rgba(255, 255, 255, 0) 103.3%);

我还需要为这个 div 应用 0.5 的不透明度。如果我只是将这样的另一行添加到 css 文件中：

opacity: 0.5;

它会将这种不透明度应用于内部的所有元素，但我不想要它。

其他问题建议申请 rgba(0, 0, 0, 0.5) 但我不能这样做，因为我有一个线性渐变，其中已经有某种不透明度。我该怎么办？

附言此背景和不透明度取自 figma 模板

我也没有运气使用一些在线梯度生成器。

【问题讨论】：

标签： css gradient opacity linear-gradients

【解决方案1】：

您可以将 div 包裹在另一个中，然后像这样应用 opacity ：

<div class="outer-div" style="background: linear-gradient(158.72deg, rgba(255, 255, 255, 0.4) 3.01%, rgba(255, 255, 255, 0) 103.3%);">
  <div class="inner-div" style="opacity: 0.5;">
    <!-- content goes here -->
  </div>
</div>

【讨论】：

问题是在外部和内部 div 内部，我有文本之类的元素，它们也处于这种不透明度之下，我不希望发生这种情况，我只需要背景不透明，不需要文本和内部的其他元素