我正在我的个人网站上工作,所有内容(大部分)都在索引页面上。前 3 个部分运行良好,但最后一个部分似乎已损坏。我认为这可能是因为 flex ,但我不确定。
谢谢大家的帮助:)
此外,我知道我的图像可能在笔中弄乱了,我知道。我要返回并进行媒体查询以修复它们
HTML
<h2>Explore my Work</h2>
<div class='imageContainer'>
<a href="#"><img src="#"></a>
<a href="#"><img src="#"></a>
</div>
</div>
<div class="contact">
<h3>Hello World</h3>
</div>
CSS
.myWork {
position: absolute;
text-align: center;
background:linear-gradient(#333,#5a5454);
height:100%;
width:100%;
}
.myWork h2 {
position:relative;
margin-top: 4%;
font-size: 4em;
color:white;
text-shadow: -4px 3px 12px rgba(0, 0, 0, 1);
}
.myWork img {
width: 500px;
height:500px;
border:4px solid black;
border-radius: 5px;
}
.myWork img:hover{
box-shadow: 0 4px 4px rgba(0, 0, 0, .1),
0 8px 8px rgba(0, 0, 0, .1),
0 16px 16px rgba(0, 0, 0, .1),
0 32px 32px rgba(0, 0, 0, .15),
0 64px 64px rgba(0, 0, 0, .15);
transition: box-shadow .3s ease-out;
}
.imageContainer {
display:flex;
-webkit-flex-flow:row wrap;
align-items: center;
padding:0;
margin:0;
justify-content: space-around;
}
.contact {
height:75%;
background-color:green;
position: absolute;
bottom:0;
}
最佳答案
不确定您是否需要将 .myWork 定位为绝对位置,如果不需要,通过删除 position: absolute 我认为它会解决您的问题。
你的问题出现在 height: 100% of .myWork combined with position: absolute.
关于javascript - 与视差内容作斗争,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49521450/