Сетка. Возникли проблемы с элементом div, находящимся поверх элемента div с непрозрачностью

У меня есть Кодепен здесь.

Как следует из названия, у меня нет решений, чтобы понять, как сделать так, чтобы элемент div, расположенный поверх элемента div с непрозрачностью, отображался. Это всего лишь небольшая страница со списками книг. Мне нравится программировать HTML, но я не очень хорош в этом. :)

Проблема может показаться простой, но я просил других о помощи, и никто из нас не смог ее решить. Я не решаюсь загрузить всю страницу здесь (это очень много). Наконец, у меня был друг, кодирующий вкладки, так что поверьте мне, я ничего не понимаю в SVG! Он сейчас на пляже и пьет маргариту, иначе я бы спросил его.

Хорошо, я попробовал сделать это, и это не сработало:

.opaq {
    padding: 4.5rem 0 0 0;
    background-color: rgb(255, 255, 255 / .6);
    opacity: 0.6;
}
.solid {
    padding: 4.5rem;
    margin: 0 4.5rem 4.5rem 4.5rem;
    background-color: white;
}
.main {
    padding: 4.5rem;
    font-style: normal;
    text-align: left;
    color: black;
    font-family: 'solway', serif;
    font-size: 2.75rem;
    line-height: 1.08;
    font-weight: bold;
}
<div class = "content-area">
<!-- All content goes in here including tables and will sit on top of the image. -->

<div class = "tile">
<div class = "opaq">
<div class = "solid">
<div class = "leadb">
Eight<br>
History Mystery<br>
Writers</div>
<div class = "leadc">
by semicodin
</div>

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

tacoshy 03.07.2024 07:17

Это длинный способ сказать, что я не могу использовать фон > плитку на этой странице? Потому что в настоящее время это устранено исправлением Тима ниже. Ох, это было бы, по меньшей мере, разочарованием. Это портит дизайн.

semicodin no.cache 03.07.2024 07:41

Исправление Тима не решает проблему непрозрачности. Он просто удалил непрозрачность, чтобы вообще не было проблемы. Это не было длинным высказыванием о том, что это невозможно сделать. Это была короткая фраза, почему этого нельзя сделать с непрозрачностью.

tacoshy 03.07.2024 07:44

Я не понимаю вашего ответа, извините. Я просто хочу иметь три «слоя», которые я описал в своем посте ниже. Сейчас у меня их 2 (непрозрачный и твердый); Мне не хватает третьего (фонового фрагмента).

semicodin no.cache 03.07.2024 07:53

Что ты пытаешься сделать ? белый фон посередине и фон, немного смешанный с белым вокруг него? каков ваш ожидаемый результат? похоже ли это codepen.io/gc-nomade/pen/MWdNzMp

G-Cyrillus 03.07.2024 11:15
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
1
5
52
3
Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Проблема связана с неправильным объявлением.

background-color: rgb(255, 255, 255 / .6);
opacity: 0.6;


Замените косую черту запятой и удалите объявление непрозрачности

background-color: rgb(255, 255, 255, .6);

Также см. Я не хочу наследовать непрозрачность дочернего элемента от родителя в CSS

Спасибо, Тим, но это стирает мою фоновую плитку! Здесь есть три «слоя»: фоновая плитка, непрозрачный слой и белый слой, в котором находится контент. Как мы можем вернуть плитку пейсли? Спасибо и вам также за эту ссылку.

semicodin no.cache 03.07.2024 06:47

Всего один заключительный комментарий. Я добавил в Codepen исправление, восстанавливающее фон плитки, который удалил исправление Тима. Итак, вы видите, что существует не одно, а ДВА решения этой проблемы, и вы найдете их оба в моем Codepen. Мир.

semicodin no.cache 05.07.2024 04:53

У Тима была половина решения. Другая половина заключалась в добавлении

padding: 4.5rem;

к стилю .tile, чтобы сделать фон мозаики видимым. Я не знаю, как разделить между нами награду за решение, поэтому делаю это здесь.

Ответ принят как подходящий
Change this
.opaq {
    padding: 4.5rem 0 0rem 0;

к этому

.opaq {
    padding: 4.5rem 0 .25rem 0;

чтобы завершить отступ слоя .opaq внизу, придав дизайну законченный вид.

Другие вопросы по теме