如何使不透明的形状始终隐藏在它后面的所有东西？

Question

#circle { width: 100px; height: 100px;
          position: relative;
          background: gray; opacity: .6;
          margin: 0 auto; 
          border-radius: 50%; 
          z-index: 2;}
#line  { display: block; position: relative;
          width: 100%; height: 5px;
          background: red; top: -50px;
          z-index: 1;}

<div id="circle"></div>
<div id="line"></div>

如何使留在圆圈后面的红线部分看不见？不将圆的不透明度更改为1。

Answer 1

你不需要单独的＆＃34;线＆＃34; div为此。

＆＃13;

＆＃13;

body {
  overflow: hidden;
  background:grey;  
}

#circle {
  width: 100px;
  height: 100px;
  position: relative;
  background: rgba(0,255,0,0.5); /* semi-transparent green */
  opacity: .6;
  margin: 0 auto;
  border-radius: 50%;
  z-index: 2;
}

#circle:before,
#circle:after {
  content: '';
  position: absolute;
  width: 50vw;
  top:50%;
  height: 5px;

}

#circle:before {
  left:0;
  transform:translate(-100%,-50%);
  background:red;
}
#circle:after {
  left:100%;
  transform:translate(0,-50%);
  background:blue;
}

＆＃13;

<div id="circle"></div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

将您的圈子放在白色圆圈内，请参阅小提琴https://jsfiddle.net/v61bguns/

<强> HTML

    @frag.xpath("tnote").each do |tfoot|
        puts "moving tnote"
        tfoot.parent.add_next_sibling(tfoot).name = 'div'
    end

<强> CSS

<div id="circle2"><div id="circle"></div></div>
<div id="line"></div>