Question

我正在尝试添加没有图标库的Facebook登录按钮。通过使用具有透明背景的Facebook图标图像显示完全白色。这是代码：

<button class="btn btn-primary btn-image btn-soc form-btn btn-lg btn-block">ign In  With Facebook</button>

css

.btn-image:before {
    content: "";
    width: 30px;
    height: 30px;
    display: inline-block;
    margin-right: 5px;
    vertical-align: text-top;
    background-color: transparent;
    background-position : center;
    background-repeat:no-repeat;
    background-image: url('../../../assets/social-icons/facebook.png');


}

当我尝试添加背景：无和边框：无时，它会完全消失。那怎么了，怎么使图标正常显示？

Answer 1

我认为您看到的白色正方形是“ facebook”字母“ F”的白色部分，但是由于它很大，因此您只会看到一个白色正方形。

尝试将background-size: 100%放在btn-image上。

透明图像在引导程序按钮上显示白色

1 个答案: