Css不透明度一个带有负边距的两个div

时间:2017-12-08 15:55:21

标签: css

https://jsfiddle.net/1zj71an3/1/

html:    
<div id="one">
aaaaaaaa
</div>
<div id="two">
bbbbbbbb
</div>
css:
#one{
  background-color:yellow;
  width:300px;
  height:300px;
  opacity: 0.5;
}

#two{
  background-color:blue;
  width:200px;
  height:200px;
  margin-top: -100px;
}

我想将不透明度0.5设置为更大的div并留下较小的div不透明度1.问题是较小的div覆盖较大的div也会受到影响。

有没有办法用css来阻止这种行为?

谢谢!

1 个答案:

答案 0 :(得分:1)

只需添加:

postgres=# select * from pg_type where oid = 25;
-[ RECORD 1 ]--+---------
typname        | text

  #one {
      position: relative;
      z-index: -1;
  }

使上面的其他div。