html - 如何为按钮创建叠加层

Question

我在为 Bootstrap 按钮创建叠加样式时遇到问题。

我有以下按钮代码:

<button id="btnTest" class="btn btn-primary">
    <span class="fa fa-certificate"></span>
    &nbsp;
    Test
    <div class="btn-overlay">
        <i class="fa fa-refresh fa-spin"></i>
    </div>
</button>

这是我想要的按钮布局，我已经实现了以下 CSS:

.btn-overlay {
    position: absolute;
    padding: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    opacity: 0.5;
    transition: opacity .5s;
}

这使得覆盖层覆盖了整个容器 div(不确定这是怎么发生的)而不仅仅是覆盖整个按钮。

知道我在这里做错了什么吗？获得覆盖部分后，我将担心如何将 fa-refresh 图标居中。

Answer 1

fiddle :https://jsfiddle.net/t3ptae1o/

HTML

<button id="btnTest" class="btn btn-primary">
    <span class="fa fa-certificate"></span>
    &nbsp;
    Test
    <span class="btn-overlay">
        <i class="fa fa-refresh fa-spin"></i>
    </span>
</button>

CSS

.btn {
  position: relative;
}
.btn-overlay {
    position: absolute;
    padding: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    opacity: 0.5;
    transition: opacity .5s;
}

这是您要找的吗？

您需要将 position: relative; 添加到 .btn 以便具有 absolute 位置的叠加层本身相对于 .btn.