css中是否有等同于背景图像的前景？

Question

我想为网页上的元素添加一些亮点。如果我不必向页面添加额外的 html，我会更愿意。我希望图像出现在元素的前面而不是后面。最好的方法是什么？

原文由 Himmators 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

要实现“前景图像”（无需额外的 HTML 代码），您可以使用伪元素（ ::before / :before ） 加上 CSS pointer-events 需要最后一个属性，以便用户可以实际单击图层“就好像它不存在一样”。

这是一个示例（使用 alpha 通道为 50% 的颜色，以便您可以看到真正的元素实际上可以被聚焦）。 http://jsfiddle.net/JxNdT/

 #cont {
  width: 200px;
  height: 200px;
  border: 1px solid #aaa;
  /*To show the boundaries of the element*/
}

#cont:before {
  position: absolute;
  content: '';
  background: rgba(0, 0, 0, 0.5);
  width: 200px;
  height: 200px;
  pointer-events: none;
}

 <div id="cont">
  Test<br>
  <input type="text" placeholder="edit">
</div>

附言。我选择了 ::before 伪元素，因为这自然会导致正确的定位。 If I pick ::after , then I have to add position:relative; to the real element ( #cont ), and top:0;left:0; to the pseudo-element （ ::after ）。

---

聚苯硫醚。要 在没有固定大小的元素上获得前景效果，需要一个额外的元素。此包装器元素需要 position:relative;display:inline-block; 样式。将伪元素的 width 和 height 设置为—，伪元素的 100% 和height将拉伸到wrapper元素的width和height。演示：http: //jsfiddle.net/JxNdT/1/ 。

原文由 Rob W 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

如果你需要一个白色透明的前景

这是为像我这样的未来访问者准备的，他们正在考虑向元素添加白色透明的前景，以传达它被隐藏/禁用的信息。您通常可以通过简单地将 opacity 降低到 1 以下来实现您的目标：

 .is-hidden {
    opacity: 0.5;
}

 visible
<span class="is-hidden">hidden</span>
visible

原文由 Bart S 发布，翻译遵循 CC BY-SA 3.0 许可协议