图叠加半透明底色再叠加文字，文字的颜色为什么会被底色影响？

Question

效果如下图：

代码如下：

        

        <img src="mao.jpg" style="width: 448px; height: 275px;">
        <div style="width: 448px; margin-top:-63px; height: 61px; background-color: #000; opacity: 0.2    ;"></div>
        <div style="margin-top:-63px; margin-left: 40px;">
        <span style="display: inline-block; margin-top:5px; width: 3px; height: 44px; background-color: #72b16a;"></span>
        <span style="display: inline-block; font:26px '微软雅黑'; color: #ffffff ;">前端技术</span>
        <span style="font: 12px '微软雅黑'; font-style: italic; color: #72b16a;">前端技术前端技术</span>
        </div>

可以看到 前端技术 几个字的颜色是 #fff 但效果图不是，我试过把半透明底色去掉，就恢复正常了，感觉不能理解，字为什么会受底下的一层影响．
还有个问题就是我想要前端技术几个字前的竖线下来一点，但竖线和字是一个line-box,我用margin下来了字也要跟着下来，有什么办法只让竖线下来吗?

Answer 1

问：文字的颜色为什么会被底色影响？

简单来说，相当于一层 mask，或者说纱布、罩子，盖住了那些内容...

这个涉及到 z-index，即元素所在层次的问题，抽点时间去了解，动手写一写

问：:before没内容没有竖线？

这个太太太太基础了，用 :before、:after 这俩伪元素时，content: ''; 不能漏掉

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

#x {
  position: relative;
  top: -275px;
  left: 500px;
  width: 448px;
  height: 275px;
  background: url('./mao.jpg');
  background-size: 448px 275px;
}

#w {
  position: relative;
  top: 215px;
  width: 100%;
  height: 60px;
  z-index: 99;
}
#w:after {
  display: inline-block;
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: 0.2;
  /* background: rgba(0, 0, 0, 0.2); */
  z-index: -1;
}
#w:before {
  display: inline-block;
  content: '';
  margin-left: 40px;
  margin-top: 6px;
  width: 4px;
  height: 48px;
  background: #13ff25;
}
#w h2 {
  display: inline-block;
  font: 26px '微软雅黑';
  color: #fff;
  height: 60px;
  line-height: 60px;
}
#w span {
  display: inline-block;
  font: 12px '微软雅黑';
  font-style: italic;
  color: #72b16a;
  line-height: 60px;
}

<section id="x">
  <div id="w">
    <h2>前端技术</h2>
    <span>这些算是测试内容</span>
  </div>
</section>

======== 分割线 ========

前面 inline-block 的用法都有问题

关于 inline-block 我自己原本也存疑好久了，今天总算有时间静下来看了看

不过，关于 BFC，呃... 内联行内、块级元素的区别，这边就不多解释了

最后只说，布局什么的，实现方式实在太多了，举个例子：

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

#x {
  position: relative;
  top: -275px;
  left: 500px;
  width: 448px;
  height: 275px;
  background: url('mao.jpg');
  background-size: 448px 275px;
}

#w {
  position: relative;
  top: 215px;
  width: 100%;
  height: 60px;
  z-index: 99;
}
#w:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  line-height: 60px;
  background: #000;
  opacity: 0.2;
  /* background: rgba(0, 0, 0, 0.2); */
  z-index: -1;
}
#w:before {
  position: absolute;
  content: '';
  margin-left: 40px;
  margin-top: 6px;
  width: 4px;
  height: 48px;
  background: #13ff25;
}
#w p {
  padding-left: 60px;
  font: 26px '微软雅黑';
  color: #fff;
  height: 60px;
  line-height: 60px;
}
#w span {
  font: 12px '微软雅黑';
  font-style: italic;
  color: #72b16a;
  line-height: 60px;
}

<section id="x">
  <div id="w">
    <p>前端技术<span>这些算是测试内容</span></p>
  </div>
</section>

Answer 2

因为你用了opacity,它会把在它下面元素一起透明，你可以用rgba去弄透明度,还有你那个竖线建议用：before去做，比多一个标签好用