gpt4 book ai didi

html - 让子div占据父div的全部大小

转载 作者:太空宇宙 更新时间:2023-11-04 03:12:37 24 4
gpt4 key购买 nike

HTML 文件:

<div class="one">
<div class="two">
<h2>ITEM NAME</h2>
</div>
</div>

CSS:

html, body {
height: 100%;
width: 100%;
}


.one{
display:block;
position: relative;
margin-left:auto;
margin-right:auto;
width:50%;
height:325px;
background-image: url('http://hd.wallpaperswide.com/thumbs/lion_5-t2.jpg');
background-size:cover;
}

.two{
position:absolute;
display:inline-block;
width:100%;
height:100%;
background-color: gray;
transition: all 0.3s ease-out;
}

.two h2{padding-top: 20%;}

我想做一个悬停过渡效果,就像这个网站: Here
当您悬停链接时,您可以在投资组合中看到另一个浅蓝色 div 展开。我猜它正在使用 transform: scale() 我试图做类似的事情,但第二个 div 超过了父 div 的大小。我该如何解决?我究竟做错了什么?

另外,我有我的 codepen样本。

最佳答案

您正在使用的狮子图像具有沿边缘出现的透明背景,给人的印象是 div one 实际上比实际要小。将 div 的背景设置为背景颜色而不是图像,您就会明白我的意思。

关于html - 让子div占据父div的全部大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29290626/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com