У меня есть Кодепен здесь.
Как следует из названия, у меня нет решений, чтобы понять, как сделать так, чтобы элемент 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>
Это длинный способ сказать, что я не могу использовать фон > плитку на этой странице? Потому что в настоящее время это устранено исправлением Тима ниже. Ох, это было бы, по меньшей мере, разочарованием. Это портит дизайн.
Исправление Тима не решает проблему непрозрачности. Он просто удалил непрозрачность, чтобы вообще не было проблемы. Это не было длинным высказыванием о том, что это невозможно сделать. Это была короткая фраза, почему этого нельзя сделать с непрозрачностью.
Я не понимаю вашего ответа, извините. Я просто хочу иметь три «слоя», которые я описал в своем посте ниже. Сейчас у меня их 2 (непрозрачный и твердый); Мне не хватает третьего (фонового фрагмента).
Что ты пытаешься сделать ? белый фон посередине и фон, немного смешанный с белым вокруг него? каков ваш ожидаемый результат? похоже ли это codepen.io/gc-nomade/pen/MWdNzMp
Проблема связана с неправильным объявлением.
background-color: rgb(255, 255, 255 / .6);
opacity: 0.6;
Замените косую черту запятой и удалите объявление непрозрачности
background-color: rgb(255, 255, 255, .6);
Также см. Я не хочу наследовать непрозрачность дочернего элемента от родителя в CSS
Спасибо, Тим, но это стирает мою фоновую плитку! Здесь есть три «слоя»: фоновая плитка, непрозрачный слой и белый слой, в котором находится контент. Как мы можем вернуть плитку пейсли? Спасибо и вам также за эту ссылку.
Всего один заключительный комментарий. Я добавил в Codepen исправление, восстанавливающее фон плитки, который удалил исправление Тима. Итак, вы видите, что существует не одно, а ДВА решения этой проблемы, и вы найдете их оба в моем Codepen. Мир.
У Тима была половина решения. Другая половина заключалась в добавлении
padding: 4.5rem;
к стилю .tile
, чтобы сделать фон мозаики видимым. Я не знаю, как разделить между нами награду за решение, поэтому делаю это здесь.
Change this
.opaq {
padding: 4.5rem 0 0rem 0;
к этому
.opaq {
padding: 4.5rem 0 .25rem 0;
чтобы завершить отступ слоя .opaq
внизу, придав дизайну законченный вид.
непрозрачность всегда отображается последней и поэтому всегда влияет на все дочерние элементы, и ей нельзя противостоять.