gpt4 book ai didi

html - 如何在屏幕上拉伸(stretch) 2 个图像相互堆叠的 anchor ?

转载 作者:行者123 更新时间:2023-11-28 19:19:58 25 4
gpt4 key购买 nike

尽管听起来很奇怪,但我有一个 Anchor 标签,其中有 2 张大小相同的图像堆叠在一起。一个在 HTML 中,另一个是 div 中的背景图像,连续 4 次。我希望这些 anchor 能够根据屏幕尺寸进行拉伸(stretch)和缩放,同时图像本身保持在彼此之上

HTML:

.gradient1 {
background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.527) 27%, rgb(0, 0, 0) 87%), url(https://via.placeholder.com/230x220);
background-repeat: no-repeat;
}

.gradient2 {
background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.527) 27%, rgb(0, 0, 0) 87%), url(https://via.placeholder.com/230x220);
background-repeat: no-repeat;
}

.gradient3 {
background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.527) 27%, rgb(0, 0, 0) 87%), url(https://via.placeholder.com/230x220);
background-repeat: no-repeat;
}

.gradient4 {
background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.527) 27%, rgb(0, 0, 0) 87%), url(https://via.placeholder.com/230x220);
background-repeat: no-repeat;
}

.gallery {
flex: 0%;
}

.thumbnails {
display: flex;
}

.effect:hover {
opacity: 0.0;
transition: .4s ease-in-out;
}
<div class="thumbnails">
<div class="gallery">
<a href="https://via.placeholder.com/230x220">
<div class="gradient1"><img class="effect" src="/img/thumbnail/tn1.png"></div>
</a>
</div>
<div class="gallery">
<a href="img/image2.gif">
<div class="gradient2"><img class="effect" src="https://via.placeholder.com/230x220"></div>
</a>
</div>
<div class="gallery">
<a href="img/image3.jpg">
<div class="gradient3"><img class="effect" src="https://via.placeholder.com/230x220"></div>
</a>
</div>
<div class="gallery">
<a href="img/image4.jpg">
<div class="gradient4"><img class="effect" src="https://via.placeholder.com/230x220"></div>
</a>
</div>
</div>

this is what I want this to look like

最佳答案

您的代码似乎有什么问题? 3张图片没有显示吗?如果是这样,我认为您的 <a href 中缺少“/”在“img”之前

关于html - 如何在屏幕上拉伸(stretch) 2 个图像相互堆叠的 anchor ?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57531654/

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