Всем привет! Пришло время для новой публикации.
То, что мы делаем (я имею в виду интерфейсных веб-разработчиков), не так уж и уникально. Часто мы сталкиваемся с проблемой, которую кажется несложной. Однако иногда мы тратим часы на поиск решения.
В данном случае я хотел изменить непрозрачность цвета фона тизера приложения и не менять прозрачность ссылок. Я пробовал несколько глупых подходов, которые казались мне логичными, и все они потерпели неудачу.
В конце концов, я нашел правильный способ сделать это, и я собираюсь поделиться им с вами.
Мое решение - создать три элемента ‹div›.
Один будет содержать два других.
Первый - с прозрачным фоном, второй - с контентом.
Затем я устанавливаю положение контейнера ‹div› относительным. Для
с прозрачным фоном я установил z-index с отрицательным числом.
Наконец, я регулирую положение содержимого, чтобы оно поместилось на прозрачном фоне.
Вуаля, с абсолютным позиционированием проблем нет.
Элемент ‹div› с классом «контейнер» должен иметь относительное позиционирование и абсолютное для других, чтобы их можно было перемещать и настраивать внутри родительского ‹Div›.
Учтите, что ‹div› с прозрачным фоном и фон с содержанием не должны содержать друг друга. Эти элементы ‹div› должны быть родными и дочерними по отношению к элементу контейнера ‹div›.
Мы применяем прозрачность к отдельному ‹div› и размещаем текст поверх него.
Спасибо за чтение. Надеюсь, эти советы помогут вам и вашей команде сбалансировать детали с общей картиной.
Этот пост изначально был опубликован в моем блоге.
