Как реализовать липкий макет, когда страница внутри iframe прозрачна и наследует фон родителей? ⇐ Html

[Anonymous]

Существует две HTML -страницы, main.html и content.html . Код для content.html и main.html выглядит следующим образом:

Код: Выделить всё

content


The Header


html,
body {
color: red;
background: transparent;
background-attachment: fixed;
background-size: cover;
}
.header {
margin: 0;
position: fixed;
top: 0;
padding: 20px;
border: 1px solid #888;
background: inherit;
z-index: 1;
}


document.getElementById("content").innerHTML =
"
Lorem ipsum
".repeat(100);



< /code>






main



placeholder

content.html



.main {
background: url("./image.png") no-repeat center center;
background-attachment: fixed;
background-size: cover;
width: 100vw;
height: 100vh;
}
.placeholder {
width: 100%;
height: 10%;
}



< /code>






content-before


The Header


html,
body {
color: red;
background: url("image.png") no-repeat center center fixed;
background-attachment: fixed;
background-size: cover;
}
.header {
margin: 0;
position: fixed;
top: 0;
padding: 20px;
border: 1px solid #888;
background: inherit;
z-index: 1;
}


document.getElementById("content").innerHTML =
"
Lorem ipsum
".repeat(100);



< /code>
If I set the background of content.html

to image.png , элемент заголовка не будет влиять на текст элементов списка, перекрывающийся его. Тем не менее, текущее требование состоит в том, что Content.html должен быть встроен на другие страницы, что означает, что его фон должен быть установлен для прозрачного. В результате, без фона, этот элемент влияет на элементы списка. Есть ли способ решить эту проблему?>

Подробнее здесь: https://stackoverflow.com/questions/796 ... parent-and