Как сделать прозрачный элемент поверх другого?

Question

[feed4rz]

Нужно наложить прозрачный элемент (или картинку) поверх другого элемента, как при наложении элементов на одном слое в paint.net / photoshop.

Сразу говорю, что сделать первый элемент такого же цвета как фон не вариант.

Пример того что нужно ниже.

Comments

[Андрей Токмаков]

Конкретнее бы, для чего это? Что должно получиться в результате?

[Сергей delphinpro]

Так сделать нельзя. придется эмулировать разными хаками и нестандартными решениями. Чтобы выбрать оптимальное, нужно все-таки видеть реальный макет - что там за блоки, какое содержимое.
Если тупо как на картинке, то черный прямоугольник вверху, два черных абсолютом по бокам и прозрачный просто идёт следом за черным.

[Максим Тимофеев]

Прозрачный - это просвечивает элемент под ним, а у Вас совсем другая песня. Надо вырезать область, методами css такое сделать нельзя. js - только

Answer 1

[Полина Емельянова]

Думаю, тут вам придется не накладывать, а "вырезать".
Уточните, как он должен себя вести? Должен ли он быть резиновым? Как адаптивиться?

Comments

[feed4rz]

Элемент, на который идет наложение, имеет фиксированный размер, ровно также как и накладываемый элемент.

[Полина Емельянова]

feed4rz: Если до меня, я бы решила так

https://codepen.io/emelyanova/pen/mmJQYP

Если вам ФИЗИЧЕСКИ нужен этот, вставленный блок, то вы его вкладываете в родителя, если блок физически не нужен, то просто делаете визуальную иллюзию псевдоэлементами. Для большей острастки цвет задан как currentColor - меняете у родителя - меняются "колонки"

[Полина Емельянова]

Можно еще с градиентами извратиться, но я даже боюсь такое предлагать.)

[feed4rz]

Полина Емельянова: Я правильно понимаю, что изменив background на transparent в вашем примере, это и станет решением?

[feed4rz]

Полина Емельянова: Я через некоторое время проверю на своей верстке, скажу работает или нет.

[Полина Емельянова]

feed4rz: По идее да, изменить бекграунд - и все. Если что не работает - пишите, будем ковырять.)

[feed4rz]

Полина Емельянова: Я правильно все расположил? Подозреваю, что контент внутри тэга canvas не работает :/

[feed4rz]

Полина Емельянова: canvas это вот этот бублик в центре.

[Полина Емельянова]

feed4rz: а какой конечный дизайн?

[feed4rz]

Полина Емельянова: Добавить прозрачную стрелку-указатель. Пример снизу.

[Полина Емельянова]

feed4rz: Так... Вопрошаем дальше, т.к. реальность интереснее вашей задачи.))) Как должна вести себя стрелка? Она приклеена, двигается, анимируется?

[Полина Емельянова]

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

[feed4rz]

Полина Емельянова: приклеена

[Полина Емельянова]

feed4rz: если она не двигается, то у элементов, которые надо "вырезать", мы срезаем углы: нижний левый и правый соотв.

Это легко делается с помощью градиентов, а сама стрелка (див) позиционируется абсолютно внутри родителя (зачем вам кенвас?????) и "вкладывается" в образовавшийся срез. Если надо, чтобы "барабан" крутился, а стрелка была приклеена, то углы срезаются уже у следующей по счету пары. Это можно реализовать на скрипте.

[feed4rz]

Полина Емельянова: Полина Емельянова: Не хочется ковырять уже готовый и рабочий скрипт. На канвасе рисуется pie-chart и виде бублика, а потом я его кручу css transform:rotate. Если добавлять стрелочку на канвасе, придется крутить контент канваса, то есть перерисовывать его, скажем, 30 раз в секунду.

Мне абсолютно ясно как сделать саму стрелку, мне нужно понять как сделать то, что у вас получилось для двух div-блоков.

Решения чисто на css нету?

[Полина Емельянова]

здесь нет такого же решения. Вам надо отрезать не прямоугольный блок, а треугольник.
Треугольник уголок "загибается" градиентом

Например:

background: #58a;
background: linear-gradient(-45deg, transparent 15px, #58a 0) right, linear-gradient(45deg, transparent 15px, #655 0) left;
background-size: 50% 100%;

И это будет ваш правый нижний угол - только значения цвета бэкграунда на свои поменяйте