Основний CSS - як накласти DIV на напівпрозорий DIV зверху

75

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

з накладанням напівпрозорого

css html

— TM23
джерело

153

Ось чисте рішення CSS, подібне до відповіді DarkBee, але без необхідності додаткового .wrapperdiv:

.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 тут, але, звичайно, ви можете використовувати інші методи прозорості, якщо хочете.

— марквангенд
джерело

@marcvangend рішення працює, але якщо замість зображення є прокручуваний div, чи можемо ми все-таки дозволити прокрутці працювати?

— Онкар

2

@Onkar Можна спробувати додати pointer-events: none;до .dimmed:afterселектора. Див. Також stackoverflow.com/questions/1009753/… . Будь ласка, повідомте нас, якщо це працює у цьому конкретному випадку використання.

— marcvangend

4

Фантастично. Якщо ви хочете перейти до базового елемента, додайте правило pointer-events: none; до правил css after element

— Адам Діамент

25

Використовуючи CSS3, вам не потрібно робити власне зображення з прозорістю.

Просто створіть div із наступним

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

Останнім параметром у фоновому режимі (.5) є рівень прозорості (більша цифра є більш непрозорою).

Приклад Скрипка

— Генерал_Твікенхем
джерело

16

.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>

— DarkBee
джерело

1

Можливо, хочеться додати top:0; left: 0;до.wrapper

— Коллін Хендерсон

Це правда. Змінив

— DarkBee

1

Крім того, якщо зображення ще не прозоре,opacity:0.4; filter:alpha(opacity=40); /* For IE8 and earlier */

— ехолокація

1

PS - використання rgba недоцільно, я бачу, ви пішли з прозорим png ... це пов’язано з Internet Explorer, так?

— TM23

Так, для підтримки старих браузерів, які не можуть обробляти CSS3

— DarkBee,

10

Для елемента div ви можете просто встановити непрозорість за допомогою класу, щоб увімкнути або вимкнути ефект.

.mute-all {
   opacity: 0.4;
}

— Андреас Крон
джерело

5

Як і попередня відповідь, але я б поклав :: before, лише для цілей укладання. Якщо ви хочете включити текст над накладанням (поширений випадок використання), за допомогою :: before will слід це виправити.

.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);
}

— Пат Ченг
джерело