时间戳

首页 > 解决方案 > 透明图像在引导按钮上显示为白色

twitter-bootstrap - 透明图像在引导按钮上显示为白色

问题描述

我正在尝试添加没有图标库的 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');


}

当我尝试添加 background: none 和 border: none 时，它​​会完全消失。那么怎么才能让图标正常显示呢？

标签： twitter-bootstrapcsscss-selectorsbootstrap-4

解决方案

我认为您看到的白色方块是“facebook”的字母“F”的白色部分，但由于它太大，您只能看到一个白色方块。

尝试穿上background-size: 100%.btn-image

推荐阅读