html - 如何将背景大小应用于背景颜色?
问题描述
我有一个图像列表,在悬停时,它会显示一个也有背景颜色的文本。我现在面临的问题是背景颜色仅填充文本。我想要它做的是跨越整个图像并设置高度。这可能吗?
#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>
解决方案
#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>
推荐阅读
- ios - 在我的表格视图中,我没有只有单元格的部分,所以如何在 ios 目标 c 中重新加载表格视图?
- django - 使用序列化程序将多个数据添加到模型中
- haskell - 多模式匹配
- angular - 安装 flex 布局时出现问题
- javascript - 无法在 react-native 中加载图像
- ios - 将 Firebase 数据检索到自定义表格视图单元格中
- php - 在 null 上调用成员函数 View()
- python-3.x - 在文件写入期间,字符串结尾成为下一个字符串的开头
- ios - UITableViewCell 上的内容未正确显示
- python - Keras 序列到序列预测,形状问题