后面图层图像?
我一直在尝试制作一个方形图像，它是在<div>后面分层的。对于我的网站，我试着让它看起来像一张CD从滑块中弹出的专辑，但是我所做的每一次尝试都使图像正方形，分层和与<div>相同的大小似乎都不起作用。它要么在顶部，要么溢出到页面底部。
这是我做的HTML:
<div class="container">
<div id="navbar">
<div id="nav">
<div>
<a href="/home.html" target="content"><i class="fa fa-home" aria-hidden="true"></i>Home</a>
</div>
<div>
<a href="/about.html" target="content"><i class="fa fa-address-book" aria-hidden="true"></i>About</a>
</div>
<div>
<a href="/portfolio.html" target="content"><i class="fa fa-book" aria-hidden="true"></i>Work</a>
</div>
<div>
<a href="/extras.html" target="content"><i class="fa fa-question-circle" aria-hidden="true"></i>Extras</a>
</div>
</div>
</div>
<iframe src="home.html" title="Webpage" id="content" name="content"></iframe>
</div>
</div>
<div class="disk">
<img src="/images/cd.svg">
</div>
和CSS:
:root { /* to get the color just type var(--color) */
--color1:#150F0F; /*DARKEST*/
--color2:#221918;
--color3:#2C221F;
--color4:#423229;
--color5:#58493D;
--color6:#8D7357;
--color7:#BCAA9B;
--color8:#BCAA9B;
--color9:#F5DEAD;
--color10:#FFF9BC; /*BRIGHTEST*/
--border-size:3px;
}
.container {
min-height: 50vh;
width: 70%;
margin: auto;
margin-left:10%;
display: grid;
grid-template-columns: minmax(2vw, 260px) auto;
background-color: var(--color9);
border: 0px;
border-style: solid;
border-top-width: var(--border-size);
border-bottom-width: var(--border-size);
border-color: var(--color10);
z-index: 69;
}
#navbar {
height: auto;
width: auto;
padding: 10%;
float: left;
background-color: var(--color7);
font-family: PopMagic;
font-size: clamp(15px, 4vw, 30px);
}
#content {
height: 100%;
width: 100%;
border:none;
}
.disk {
min-height: 50vh;
max-width: 85%;
margin: auto;
margin-left:10%;
margin-top: -50vh;
position:relative;
overflow:hidden;
padding-bottom:100%;
}
.disk img {
min-height: 50vh;
position: absolute;
}
我使用的网站可以在这里找到。
正如您所期望的那样，开发人员有很多方法。
你应该考虑一下你的布局是如何构建的，因为没有足够的空间来容纳你的disc元素。
如果我是你，我会摆脱以下div
<div class="disk">
<img src="/images/cd.svg">
</div>
并尝试使用::afterpseudo -element代替。
...
.container {
border: none;
position: relative;
padding: 0 160px 0 0;
background-color: #0000;
::after {
right: 0;
content: '';
width: 160px;
height: 100%;
position: absolute;
background-size: cover;
background-position: right;
background-repeat: no-repeat;
background-image: url(/images/cd.svg);
}
}
...
请不要期待这里的最终解决方案，但把上面的代码作为一堆线索，可能有助于解决你的问题。