Основной CSS - как наложить DIV с полупрозрачным DIV сверху

Я пытаюсь сделать этот рендеринг прямо в моем браузере (Chrome). У меня есть обертка, содержащая все элементы HTML, и я хочу иметь DIV (позволяет называть его div-1), которые содержат изображение, и имеет верхний div над ним влево, как я набросал в этом picture... любые быстрые решения?

Ответ 1

Здесь чисто CSS-решение, похожее на DarkBee, но без необходимости в дополнительном .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 здесь, но, конечно, вы можете использовать другие методы прозрачности.

Ответ 2

Используя CSS3, вам не нужно создавать свой собственный образ с прозрачностью.

Просто введите div со следующими

position:absolute;
left:0;
background: rgba(255,255,255,.5);

Последний параметр в фоновом режиме (.5) - это уровень прозрачности (большее число более непрозрачно).

Пример скрипта

Ответ 3

.foo {
   position : relative;
}
.foo .wrapper {
    background-image : url('semi-trans.png');
    z-index : 10;
    position : absolute;
    top : 0;
    left : 0;
}

<div class="foo">
   <img src="example.png" />
   <div class="wrapper">&nbsp;</div>
</div>

Ответ 4

Как и предыдущий ответ, но я бы поставил:: раньше, только для целей стекирования. Если вы хотите включить текст поверх оверлея (общий прецедент), использование:: before должно исправить это.

.dimmed {
  position: relative;
}

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

Ответ 5

Для элемента div-элемента вы можете просто установить непрозрачность через класс, чтобы включить или отключить эффект.

.mute-all {
   opacity: 0.4;
}