我不想从CSS中的父级继承子不透明度-Java 学习之路

316

我不想从CSS中的父级继承子不透明度 .

我有一个div是父，我在第一个div里面有另一个div，就是孩子 .

我想在父div中设置opacity属性，但我不希望子div继承opacity属性 .

我怎样才能做到这一点？

14 回答

0

正如其他人在此和其他类似线程中提到的那样，避免此问题的最佳方法是使用RGBA / HSLA或使用透明PNG .

但是，如果你想要一个荒谬的解决方案，类似于在这个帖子（也是我的网站）的另一个答案中链接的解决方案，这里是我写的一个全新的脚本，它自动修复了这个问题，名为thatNotYoChild.js：

http://www.impressivewebs.com/fixing-parent-child-opacity/

基本上它使用JavaScript从父div中删除所有子元素，然后将子元素重新定位到它们应该的位置，而不再实际成为该元素的子元素 .

对我而言，这应该是最后的手段，但我认为如果有人想这样做的话，写下这样做的东西会很有趣 .

回复于 2024-04-27T06:30:33+08:00
-2
如果您的父级是透明的并且您希望您的孩子是相同的，但是只能定义（例如，覆盖选择下拉列表的用户代理样式），这是一个小技巧：
```
.parent {
     background-color: rgba(0,0,0,0.5);
}

.child {
     background-color: rgba(128,128,128,0);
}
```
回复于 2024-04-27T06:30:33+08:00
1
不使用不透明度，而是使用rgba设置背景颜色，其中“a”是透明度级别 .

所以代替：
```
background-color: rgb(0,0,255); opacity: 0.5;
```
使用
```
background-color: rgba(0,0,255,0.5);
```
回复于 2024-04-27T06:30:33+08:00
2

不透明度实际上并未在CSS中继承 . 这是一个后期渲染组变换 . 换句话说，如果 <div> 具有不透明度设置，则将div及其所有子项渲染到临时缓冲区中，然后将整个缓冲区合成到具有给定不透明度设置的页面中 .

你想在这里做什么取决于你正在寻找的确切渲染，这个问题并不清楚 .

回复于 2024-04-27T06:30:33+08:00

子元素的不透明度是从父元素继承的 .

但我们可以使用css position属性来完成我们的成就 .

文本容器div可以放在父div之外，但绝对定位可以预测所需的效果 .

理想要求------------------ >>>>>>>>>>>>

HTML

<div class="container">       
              <div class="bar">
                  <div class="text">The text opacity is inherited   from the parent div    </div>
              </div>
            </div>

CSS

.container{
                position:relative;
                                   }
           .bar{
               opacity:0.2;
               background-color:#000;
               z-index:3;
               position:absolute;
               top:0;
               left:0;
              }

              .text{
                color:#fff;

               }

输出： -

Inherited Opacity of Text(the text color is #000; but not visisble.)

由于从父div继承不透明度，因此文本不可见 .

解决方案------------------- >>>>>>

HTML

<div class="container">  
         <div class="text">Opacity is not inherited from parent div "bar"</div>
         <div class="bar"></div>
       </div>

CSS

.container{
                position:relative;
                                   }
           .bar{
               opacity:0.2;
               background-color:#000;
               z-index:3;
               position:absolute;
               top:0;
               left:0;
              }

              .text{
                color:#fff;
                z-index:3;
                position:absolute;
               top:0;
               left:0;  
               }

输出：

Not Inherited

文本与背景颜色相同，因为div不在透明div中

回复于 2024-04-27T06:30:33+08:00

问题没有定义，如果背景是颜色或图像，但由于@Blowski已经回答了彩色背景，下面的图片有一个黑客攻击：

background: linear-gradient(rgba(0,0,0,.6), rgba(0,0,0,.6)), url('image.jpg');

这样你就可以操纵不透明度的颜色，甚至可以添加漂亮的渐变效果 .

.wrapper {
  width: 630px;
  height: 420px;
  display: table;
  background: linear-gradient(
    rgba(0,0,0,.8), 
    rgba(0,0,0,.8)), 
    url('http://cdn.moviestillsdb.com/sm/35bc3c6a2b791425de6caf8b9391026e/rambo-iii.jpg');
 }

h1 {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  color: #fff;
  }

<div class="wrapper">
<h1>Question 5770341</h1>
</div>

回复于 2024-04-27T06:30:33+08:00

3

似乎 display: block 元素不会从 display: inline 父级继承不透明度 .

Codepen example

也许是因为它是无效的标记，浏览器正在秘密地将它们分开？因为来源没有显示发生这种情况 . 我错过了什么吗？

回复于 2024-04-27T06:30:33+08:00

上面的答案对我来说似乎很复杂，所以我写了这个：

#kb-mask-overlay { 
    background-color: rgba(0,0,0,0.8);
    width: 100%;
    height: 100%; 
    z-index: 10000;
    top: 0; 
    left: 0; 
    position: fixed;
    content: "";
}

#kb-mask-overlay > .pop-up {
    width: 800px;
    height: 150px;
    background-color: dimgray;
    margin-top: 30px; 
    margin-left: 30px;
}

span {
  color: white;
}

<div id="kb-mask-overlay">
  <div class="pop-up">
    <span>Content of no opacity children</span>
  </div>
</div>
<div>
 <p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vitae arcu nec velit pharetra consequat a quis sem. Vestibulum rutrum, ligula nec aliquam suscipit, sem justo accumsan mauris, id iaculis mauris arcu a eros. Donec sem urna, posuere id felis eget, pharetra rhoncus felis. Mauris tellus metus, rhoncus et laoreet sed, dictum nec orci. Mauris sagittis et nisl vitae aliquet. Sed vestibulum at orci ut tempor. Ut tristique vel erat sed efficitur. Vivamus vestibulum velit condimentum tristique lacinia. Sed dignissim iaculis mattis. Sed eu ligula felis. Mauris diam augue, rhoncus sed interdum nec, euismod eget urna.

Morbi sem arcu, sollicitudin ut euismod ac, iaculis id dolor. Praesent ultricies eu massa eget varius. Nunc sit amet egestas arcu. Quisque at turpis lobortis nibh semper imperdiet vitae a neque. Proin maximus laoreet luctus. Nulla vel nulla ut elit blandit consequat. Nullam tempus purus vitae luctus fringilla. Nullam sodales vel justo vitae eleifend. Suspendisse et tortor nulla. Ut pharetra, sapien non porttitor pharetra, libero augue dictum purus, dignissim vehicula ligula nulla sed purus. Cras nec dapibus dolor. Donec nulla arcu, pretium ac ipsum vel, accumsan egestas urna. Vestibulum at bibendum tortor, a consequat eros. Nunc interdum at erat nec ultrices. Sed a augue sit amet lacus sodales eleifend ut id metus. Quisque vel luctus arcu. 
 </p>
</div>

kb-mask-overlay 这是你的（不透明）父母， pop-up 它's your (no opacity) children. Everything below it'你的网站的其余部分 .

回复于 2024-04-27T06:30:33+08:00

1
没有一种适合所有人的方法，但我发现特别有用的一件事是为div的直接孩子设置不透明度，除了你想要保持完全可见的孩子 . 在代码中：
```
<div class="parent">
    <div class="child1"></div>
    <div class="child2"></div>
    <div class="child3"></div>
    <div class="child4"></div>
</div>
```
和css：
```
div.parent > div:not(.child1){
    opacity: 0.5;
}
```
如果您在父级上有背景颜色/图像，则可以通过应用alpha过滤器使用rgba和background-image修复颜色不透明度
回复于 2024-04-27T06:30:33+08:00
0

On mac 您可以使用预览编辑器将不透明度应用于放置在.png图像上的白色矩形，然后再将其放入.css中 .

1）图像
Logo

2）在图像周围创建一个矩形
Rectanle around logo

3）将背景颜色更改为白色
rectangle turned white

4）调整矩形不透明度
opaque image

回复于 2024-04-27T06:30:33+08:00

524

如果必须使用图像作为透明背景，则可以使用伪元素解决它：

HTML

<div class="wrap"> 
   <p>I have 100% opacity</p>  
</div>

CSS

.wrap, .wrap > * {
  position: relative;
}
.wrap:before {
  content: " ";
  opacity: 0.2;
  background: url("http://placehold.it/100x100/FF0000") repeat;     
  position: absolute;
  width: 100%;
  height: 100%;
}

回复于 2024-04-27T06:30:33+08:00

27
我的答案不是关于静态父子布局，而是关于动画 .

我今天正在做一个svg演示，我需要svg在div中（因为svg是用父的div宽度和高度创建的，为周围的路径设置动画），这个父div在svg路径动画期间需要不可见（然后这个div应该是 animate opacity from 0 to 1 ，这是最重要的部分） . 和因为带有 opacity: 0 的父div隐藏了我的svg，我遇到了这个带有 visibility 选项的hack（带有 visibility: visible 的孩子可以在父母的内部看到 visibility: hidden ）：
```
.main.invisible .test {
  visibility: hidden;
}
.main.opacity-zero .test {
  opacity: 0;
  transition: opacity 0s !important;
}
.test { // parent div
  transition: opacity 1s;
}
.test-svg { // child svg
  visibility: visible;
}
```
然后，在js中，使用超时函数删除 .invisible 类，添加 .opacity-zero 类，触发布局类似于 whatever.style.top; 并删除 .opacity-zero 类 .
```
var $main = $(".main");
  setTimeout(function() {
    $main.addClass('opacity-zero').removeClass("invisible");
    $(".test-svg").hide();
    $main.css("top");
    $main.removeClass("opacity-zero");
  }, 3000);
```
最好查看这个演示http://codepen.io/suez/pen/54bbb2f09e8d7680da1af2faa29a0aef?editors=011
回复于 2024-04-27T06:30:33+08:00

使用以下方式递归地将不透明度1.0分配给子项：

div > div { opacity: 1.0 }

例：

div.x { opacity: 0.5 }
div.x > div.x { opacity: 1.0 }

<div style="background-color: #f00; padding:20px;">
  <div style="background-color: #0f0; padding:20px;">
    <div style="background-color: #00f; padding:20px;">
      <div style="background-color: #000; padding:20px; color:#fff">
         Example Text - No opacity definition
      </div>
    </div>  
  </div>
</div>
<div style="opacity:0.5; background-color: #f00; padding:20px;">
  <div style="opacity:0.5; background-color: #0f0; padding:20px;">
    <div style="opacity:0.5; background-color: #00f; padding:20px;">
      <div style="opacity:0.5; background-color: #000; padding:20px; color:#fff">
        Example Text - 50% opacity inherited
      </div>
    </div>  
  </div>
</div>
<div class="x" style="background-color: #f00; padding:20px;">
  <div class="x" style="background-color: #0f0; padding:20px;">
    <div class="x" style="background-color: #00f; padding:20px;">
      <div class="x" style="background-color: #000; padding:20px; color:#fff">
         Example Text - 50% opacity not inherited
      </div>
    </div>  
  </div>
</div>
<div style="opacity: 0.5; background-color: #000; padding:20px; color:#fff">
  Example Text - 50% opacity
</div>

回复于 2024-04-27T06:30:33+08:00

2
对于试图制作表格（或其他东西）的其他人，使用不透明度将焦点放在一行上 . 就像@Blowski所说的那样使用颜色而不是不透明度 . 看看这个小提琴：http://jsfiddle.net/2en6o43d/
```
.table:hover > .row:not(:hover)
```
回复于 2024-04-27T06:30:33+08:00

我不想从CSS中的父级继承子不透明度

14 回答

相关问题