所以我正在做一个图片库,可以垂直滚动,图片居中,间距相等,当鼠标悬停时,图片会放大,标题会显示出来。
h2
与
background-image
但是当我把它们放在一起的时候,h2就会塌缩在一起。
这就是我想要的
但这就是我现在得到的
现在我的代码是这样的HTML:
<div id="gallery">
<h2 style="background-image: url(img/image-presentation.jpg);">
Concert</h2>
<h2 style="background-image: url(img/image-presentation.jpg);">
Concert</h2>
<h2 style="background-image: url(img/image-presentation.jpg);">
Concert</h2>
<h2 style="background-image: url(img/image-presentation.jpg);">
Concert</h2>
<h2 style="background-image: url(img/image-presentation.jpg);">
Concert</h2>
<h2 style="background-image: url(img/image-presentation.jpg);">
Concert</h2>
</div>
CSS:
#projet .content .window #gallery {
text-align: center;
height: 40vh;
overflow-y: scroll;
padding: 5vh;
padding-top: 1vh;
padding-bottom: 1vh;
display: block;
}
#projet .content .window #gallery h2 {
width: 25vh;
height: 25vh;
border-radius: 1vh;
margin: 1.5vh;
display: table-cell;
vertical-align: middle;
color: transparent;
background-size: cover;
background-repeat: no-repeat;
transition: all 0.2s ease;
}
#projet .content .window #gallery h2:hover {
color: black;
backdrop-filter: blur(10px);
transform: scale(1.2);
}
我不知道该做什么,也不知道我做错了什么。
有人能帮帮我吗?
我在css中尝试了不同的显示
#gallery
但是我找不到一个正确的方法来使它工作
2条答案
按热度按时间b1uwtaje1#
您可以为每个图像使用单独的div,而不是将image用作h2标签的background-imgage,如下所示:
对于CSS,您可以使用flex,如下所示:
deyfvvtc2#
使用
<h2>
标签的“background-image”不是正确的方法。您应该创建一个<div>
,其中您放置了一个<img>
作为图像,一个<h2>
作为文本。或者您可以在图像上使用伪元素,而不是<h2>
和<div>
。如果您想要放置它们,您可以使用display: grid;
或display: flex;
。我试着当场写,因为这应该是一种可能性。
超文本标记语言
中央支助组