基本CSS - 如何在顶部覆盖一个带有半透明DIV的DIV [英] Basic CSS - how to overlay a DIV with semi-transparent DIV on top

问题描述

我在尝试在浏览器（Chrome）中进行此渲染。我有一个包装HTML的所有元素的包装，我想有一个DIV（让我们称之为div-1）持有一个图像，并在它的左上方有一个重叠的div，就像我在草图图片...任何快速解决方案？

I'm struggling to make this render right in my browser (Chrome). I have a wrapper holding all the elements of the HTML, and I want to have a DIV (lets call it div-1) that hold a image, and has a overlay div on top of it to the left, like I sketched in this picture...any quick solutions?

推荐答案

这里是一个纯CSS解决方案，类似于DarkBee的答案，但不需要额外的 .wrapper div：

Here's a pure CSS solution, similar to DarkBee's answer, but without the need for an extra .wrapper div:

.dimmed {
  position: relative;
}

.dimmed:after {
  content: " ";
  z-index: 10;
  display: block;
  position: absolute;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.5);
}

我在这里使用rgba，当然你可以使用其他透明方法如果你喜欢。

I'm using rgba here, but of course you can use other transparency methods if you like.

这篇关于基本CSS - 如何在顶部覆盖一个带有半透明DIV的DIV的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！