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

3qpi33ja  于 2023-02-06  发布在  其他
关注(0)|答案(1)|浏览(158)
    • 此问题在此处已有答案**:

Set opacity of background image without affecting child elements(15个答案)
(13个答案)
3天前关闭。
我的问题是:我有一个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),但我不能这样做,因为我有一个线性渐变,其中已经有某种不透明。我该怎么办?
P.S.此背景和不透明度取自figma模板
我也没有运气与一些在线梯度发生器。

tp5buhyn

tp5buhyn1#

您可以将一个div Package 在另一个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>

相关问题