【发布时间】：2021-06-01 09:05:19
【问题描述】：
我有一张图片，已放入 div 类“外部”中，该类已裁剪为特定大小。 我已经使用显示的样式在另一个 div 类“mythumbnail”中覆盖了文本。 我很困惑为什么我不能让 div “mythumbnail” 与 div “outer” 中的图片底部相邻。我会很感激你的帮助。另外，我希望 div “mythumbnail” 根据标题和文本的多少来扩展或收缩，而不管“外部”尺寸如何，但总是将 div “mythumbnail”的高度折叠到 div “outer”的底部。
@import url('https://fonts.googleapis.com/css2?family=Changa+One:ital@0;1&family=Open+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap');
h1,h2,h3{
font-family: 'Changa One',Verdana, Geneva, sans-serif;
font-weight: normal;
}
p {
padding: 0;
margin: 0;
}
body {
font-family:'Open Sans',Verdana, Geneva, sans-serif;
font-size: 1rem;
margin: 0;
padding: 1rem;
background-color: #cfbaff;
}
.outer {
height: 250px;
width: 250px;
background-color: #6561B8;
background-size: cover;
position: relative;
text-align: center;
color: white;
padding: 0;
margin: 0;
}
.outer img {
height: 250px;
width: 250px;
object-fit: cover;
}
.mythumbnail h2,
.mythumbnail p {
padding: 0 .5rem 0;
margin: 0;
}
.mythumbnail {
margin: 0;
padding: 0.3rem 0;
position: absolute;
width: 100%;
bottom: 0;
left: 50%;
transform: translate(-50%, -50%);
background-color: rgb(0,0,0,0.4);
}
<html>
<body>
<div><h1>Image example</h1></div>
<div class="outer"><img src="https://wpgeek.low.li/wp-content/uploads/2021/03/june-2020-purple-cone-flowers-b.jpg" />
<div class="mythumbnail">
<h2>Title</h2>
<p>My fairly simple description that takes one or two lines...</p>
</div>
</div>
<div><p>It should look something like this:</p>
<img src="https://wpgeek.low.li/wp-content/uploads/2021/03/june-2020-purple-cone-flowers-thumb.jpg" />
</div>
</body>【问题讨论】：
标签： css image text overlay bottom