img 标签仅在 FireFox 中不显示背景图像

Question

我有一个图片库，这些图片在所有其他浏览器（IE、Chrome、O、Saf）上都能正常显示，但在 Firefox 上却拒绝显示。 图片显示如下：

<section class="p-0" id="portfolio">
    <div class="container-fluid p-0">
        <div class="row no-gutters popup-gallery">
            <div class="col-lg-4 col-sm-6">
                <a class="portfolio-box" href="http://apache.techgorilla.io/wp-content/uploads/2018/04/ckG9Q85.png">
                    <img class="img-fluid" src="" style="background-image: url(http://apache.techgorilla.io/wp-content/uploads/2018/04/ckG9Q85.png);" alt="">
                    <div class="portfolio-box-caption">
                        <div class="portfolio-box-caption-content">
                            <div class="project-category text-faded">
                                Web
                            </div>
                            <div class="project-name">
                                TechGorilla UI example site
                            </div>
                        </div>
                    </div>
                </a>
            </div>
        </div>
    </div>
</section>

我将 src 设置为空，因为我有一个背景图像。其 CSS 如下：

.portfolio-box {
    position: relative;
    display: block;
    margin: 0 auto;
}

.portfolio-box .img-fluid {
    min-width: 100%;
    min-height: 300px;
    background-position: center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    border:0;
}

.portfolio-box .portfolio-box-caption {
    position: absolute;
    bottom: 0;
    display: block;
    width: 100%;
    height: 100%;
    text-align: center;
    opacity: 0;
    color: #fff;
    background: rgba(240, 95, 64, 0.9);
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    transition: all 0.2s;
}

.portfolio-box .portfolio-box-caption .portfolio-box-caption-content {
    position: absolute;
    top: 50%;
    width: 100%;
    transform: translateY(-50%);
    text-align: center;
}

.portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-category,
.portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-name {
    padding: 0 15px;
    font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
}

.portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-category {
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
}

.portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-name {
    font-size: 18px;
}

.portfolio-box:hover .portfolio-box-caption {
    opacity: 1;
}

.portfolio-box:focus {
    outline: none;
}

@media (min-width: 768px) {
    .portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-category {
        font-size: 16px;
    }
    .portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-name {
        font-size: 22px;
    }
}

它在其他任何地方都可以正常工作，这不是浏览器找不到某些变量的问题（AKA 需要 -mos-transition 等），而且我有一个脚本可以自动修复它。

我用谷歌搜索并没有发现任何类似的问题，我已经使用 firefox/google/etc devtools 添加/删除元素以尝试使其工作无济于事

Answer 1

看来，与所有其他浏览器不同，在 FF 中您需要指定“显示”属性。只需添加

显示：块；

上课

.portfolio-box .img-fluid

现在可以很好地显示图像，我之前没有尝试过，因为我认为它是默认继承的

Answer 2

我的直觉是你的 omg 标签有一个空的src 属性。如果你打算只使用背景来显示图像，只需使用div

Answer 3

是的，将背景图像放在 div 中的另一种方法是将 img 标签更改为：

<img class="img-fluid" src="" style="background-image: url(http://apache.techgorilla.io/wp-content/uploads/2018/04/ckG9Q85.png);" alt="">

到：

<img class="img-fluid" src="http://apache.techgorilla.io/wp-content/uploads/2018/04/ckG9Q85.png" alt="Tech Gorilla">

现在页面看起来就像我想象的你希望它在 Chrome、Firefox 甚至 IE 11 中看到的那样。