子级不透明度与父级不透明度之间存在CSS差异 [英] Have a child opacity different then parent opacity with CSS

问题描述

这是我的 box 类

.rectangle-box {
    width: 200px;
    height: 30px;
    background: #808080;
    opacity: 0.3;
    float: right;
}

.rectangle-red {
    width: 65px;
    height: 30px;
    background: #ff4742;
    opacity: 1;
    float: left;
}

在HTML中：

<div class="rectangle-box">
    <div class="rectangle-red"></div>
</div>

演示： https://jsfiddle.net/uq6ectfc/1/

我需要 rectangle-red 的不透明度 1 和矩形框的不透明度 0.3 。

I need rectangle-red to have opacity of 1 and rectangle-box of 0.3. But it sticks to the parent opacity.

我该如何解决？

推荐答案

不透明度不能大于父级

，但是可以使用两种方法

but you can use two methods

我使用了 rgba rgba（0,0,0,0.0）

.rectangle-box {
  width: 200px;
  height: 30px;
  background: rgba(128, 128, 128, 0.3);
  float: right;
  position: relative;
}

.rectangle-red {
  width: 65px;
  height: 30px;
  background: #ff4742;
  opacity: 1;
  float: left;
}

<div class="rectangle-box">
  <div class="rectangle-red"></div>
</div>

或者第二种方法是我使用：pseudo 元素添加背景

Or the second method i have used :pseudo element to add a background

.rectangle-box {
  width: 200px;
  height: 30px;
  float: right;
  position: relative;
}

.rectangle-box:after {
  content: '';
  opacity: 0.3;
  background: #808080;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  z-index:-1;
}

.rectangle-red {
  width: 65px;
  height: 30px;
  background: #ff4742;
  opacity: 1;
  float: left;
}

<div class="rectangle-box">
  <div class="rectangle-red"></div>
</div>

这篇关于子级不透明度与父级不透明度之间存在CSS差异的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！