CSS中的不透明度不影响div [重复]答案

【问题标题】：Opacity in CSS to not affect the div [duplicate]CSS中的不透明度不影响div [重复]
【发布时间】：2020-08-10 15:36:40
【问题描述】：

我有一个将背景图像放入 div 的代码，但是当我使用 opacity 时，所有 div 都会受到影响，即使其中的文本是我的代码；

  .banner_area .banner_inner {
    opacity: .5;
    position: relative;
    overflow: hidden;
    width: 100%;
    min-height: 395px;
    background: url(../img/breadcrumb/checkout-bg.jpg) no-repeat center bottom;
    background-size: cover;
    z-index: 1; }

我试过background: rgba(0, 0, 0, 0.6);，但我的图片没有显示

我也试过background: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,.5)), url(../img/breadcrumb/checkout-bg.jpg);，但它不起作用

【问题讨论】：

你能发布 HTML 吗？现在，您正在尝试选择一个 .banner_area 的 child，其类为 banner_inner。这就是你想要做的吗？
这能回答你的问题吗？ Can I set an opacity only to the background image of a div?

标签： html css

【解决方案1】：

我创建了一个 JS fiddle 。这是您要找的东西吗？

 .banner_area .banner_inner {
    opacity: 0.5;
    position: relative;
    overflow: hidden;
    width: 100%;
    min-height: 395px;
    background-image: url('https://cdn.pixabay.com/photo/2018/02/08/22/27/flower-3140492__480.jpg');
    background-repeat: no-repeat;
  background-attachment: bottom;
  background-position: center;
    z-index: 1;
    }

【讨论】：

【解决方案2】：

不确定这是否有帮助，因为看不到 htmlt，但首先我会使用 ::before 伪元素动态添加叠加层，然后修复 z-index

.banner_area:before {
  opacity: .5;
  position: relative;
  overflow: hidden;
  width: 100%;
  min-height: 395px;
  background: url(../img/breadcrumb/checkout-bg.jpg) no-repeat center bottom;
  background-size: cover;
  z-index: -1; 
}

然后会放内容，不应该是不透明的

【讨论】：

工作前谢谢！！！