我可以在文本上添加一个覆盖“元素”吗? 哪个应该居中(水平和垂直)。
<div id="container">
<div id="item-text">text</div>
<div id="item-overlay"></div>
</div>
这是一个 fiddle :https://jsfiddle.net/c1c7hsqj/
最佳答案
不适用于当前结构。
覆盖层需要是要覆盖的元素的子元素...以便我们可以使用定位。
所以。
.parent {
display: flex;
justify-content: center;
align-items: center;
margin: 1em;
height:75px;
background: plum;
}
#item-text {
border: 1px solid grey;
background: #c0ffee;
padding: 1em;
position: relative;
}
#item-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255, 0, 0, 0.25);
}
#item-text:hover #item-overlay {
background: rgba(255, 0, 0, 0.5);
}
<div class="parent">
<div id="item-text">Lorem ipsum dolor sit amet.
<div id="item-overlay"></div>
</div>
</div>
关于css - 用 flexbox 叠加,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34499519/