html - 出现在菜单前面的图像
问题描述
我正在制作一个网站,我有一个小错误,其中一个部分中的图像出现在我的菜单前面。我试图围绕 z-index 值进行调整,但对我没有任何帮助。这是它的样子
我希望图像按原样显示在菜单下,但它似乎无法正常运行,我无法检测到问题,有人可以帮我解决这个问题吗?
HTML:
<section id="portfolio">
<div class="container">
<h1>MY WORK</h1>
<h2>Below you will find my favorite projects & school assignments</h2>
<!--CPU-->
<div class="project">
<div class="img-box">
<img src="./img/cpu.png">
<div class="hovertext">Test Text 1</div>
</div>
</div>
<!--JAVA-->
<div class="project">
<div class="img-box">
<img src="./img/JSON.png">
<div class="hovertext">Test Text 2</div>
</div>
</div>
<!--PHOTOSHOP-->
<div class="project">
<div class="img-box">
<img src="./img/photoshop.png">
<div class="hovertext">Test Text 3</div>
</div>
</div>
CSS:
#portfolio {
background-color: : white;
padding-bottom: 100px;
}
#portfolio h1 {
font-size: 30px;
font-weight: 400px;
letter-spacing: 5px;
text-align: center;
color: #000;
}
#portfolio h2 {
font-size: 15px;
letter-spacing: 2px;
text-align: center;
color: #000;
}
.project {
display: inline-block;
width: 33.33%;
margin-right: -4px;
}
.img-box {
padding: 20px;
position: relative;
}
.project img {
width: 100%;
display: block;
border-radius: 12px;
}
.img-box img:hover {
transform: scale(1.1);
transition: 0.5s;
opacity: 0.5;
}
.img-box .hovertext {
display: none;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.img-box:hover .hovertext {
display: block;
}
解决方案
我没有测试,但也许会工作。
<div class="container" style="z-index: -999999">
推荐阅读
- python - 如何在不丢失格式的情况下使用 pandas 从 excel 中获取特定的行和列?
- java - 将参数传递给java中的URL占位符
- java - Java编译错误'包不存在'
- amazon-web-services - 无法在 aws ec2 ubuntu 18.04 实例的 8000 端口上访问我的 laravel 站点
- c - 函数返回指向结构分段错误的指针
- sql - sparksql 获取列中的前一个非空值
- reactjs - React MenuItem event.target.value 不适用于一个,但适用于另一个 MenuItem
- c# - 如何在 Azure 事件中心中的一个分区处于活动状态时禁用其他分区以停止接收消息
- c++ - 在我的班级中的几个数组上调用 delete[] 时得到“检测到堆损坏” - C++
- android - 如何在 Android 中将 CURL PUT 请求转换为 Retrofit?