我有一个图像列表,在悬停时,它会显示一个带有背景颜色的文本。我现在面临的问题是背景颜色只填充文本。我想要它做的是跨越整个图像,并为其设置高度。这可能吗?
#pictures {
line-height: 0;
letter-spacing: 0;
font-size: 0;
}
#pictures li {
display: inline-block;
width: 33%;
margin: 0;
padding: 10px;
text-align: center;
}
.imageText {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: black;
padding: 15px;
}
.hoverelement:hover .imageText {
background-color: rgba(235, 242, 238, .8);
background-repeat: no-repeat;
font-size: 24px;
}
<ul id="pictures">
<li>
<div style="position: relative">
<a href="/" class="hoverelement"><img src="1.jpg" height="250" width="250">
<p class="imageText">TEXT</p>
</a>
</div>
</li>
</ul>
答案 0 :(得分:0)
您可以使用 flexbox 将文本居中,但您需要确保文本占据其相关父级的全部空间。
当您将绝对定位元素的 top、right、bottom 和 left 设置为 0 时,它将占据其相对父元素的全部空间,而无需定义宽度/高度。
display: flex;
justify-content: center;
align-items: center;
文本元素的上述 3 条规则将使其水平和垂直居中。
剩余问题 - 由于 li
上的宽度设置为 33% 并且图像有自己的宽度,当您悬停时,您会看到奇怪的行为,因为 33% 可能大于/小于250 在图像上。我不知道你想用这个做什么,所以我没有编辑那些 css 规则,我相信你可以从这里弄清楚
#pictures {
line-height: 0;
letter-spacing: 0;
font-size: 0;
}
#pictures li {
display: inline-block;
width: 33%;
margin: 0;
padding: 10px;
text-align: center;
}
.imageText {
position: absolute;
width: 100%;
top: 50%;
left: 0;
transform: translateY(-50%);
color: black;
padding: 15px;
display: flex;
justify-content: center;
align-items: center;
}
.hoverelement:hover .imageText {
background-color: rgba(235, 242, 238, .8);
background-repeat: no-repeat;
font-size: 24px;
}
<ul id="pictures">
<li>
<div style="position: relative">
<a href="/" class="hoverelement"><img src="1.jpg" height="250" width="250">
<p class="imageText">TEXT</p>
</a>
</div>
</li>
</ul>
答案 1 :(得分:0)
您需要为您的绝对定位元素指定宽度和高度,否则在您的案例文本{{1} }.
您真正想要的是一个具有 100% 宽度和高度并使其内容居中的段落,如下所示:
TEXT
#pictures li {
display: inline-block;
width: 250px;
position: relative;
}
#pictures li .image-text {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
}
#pictures li .image-text p {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
color: black;
margin: 0;
}
#pictures li .image-text:hover {
background-color: rgba(235, 242, 238, .8);
background-repeat: no-repeat;
font-size: 24px;
}
答案 2 :(得分:0)
#pictures li {
display: inline-block;
margin: 0;
padding: 10px;
text-align: center;
}
.imageText {
position: absolute;
top: 37.5%; /* (100% - height) / 2 */
left: 10px;
width: 100%;
height: 25%;
background-color: rgba(235, 242, 238, .8);
color: black;
font-size: 24px;
margin: -10px; /* (-1 * padding of the li) */
padding: 0px;
display: none; /* hide */
}
.imageText:before { /* vertically centers the text within the grey bar */
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}
.hoverelement:hover .imageText {
display: initial;
}
<ul id="pictures">
<li>
<div style="position: relative">
<a href="/" class="hoverelement"><img src="https://picsum.photos/250" height="250" width="250">
<p class="imageText">TEXT</p>
</a>
</div>
</li>
</ul>