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等），而且我有一个自动修复它的脚本。

我已经google了，并没有发现任何类似的问题，我已经使用firefox / google / etc devtools来添加/删除元素，试图让它工作无济于事

Answer 1

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

即可

Answer 2

是的，将背景图像放在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中查看。

Answer 3

所以看起来，与其他所有浏览器不同，在FF中你需要指定＆＃39;显示＆＃39;属性。只需添加

display：block;

到班级

.portfolio-box .img-fluid

现在将显示图像完全正常，我之前没有尝试过，因为我认为它是默认继承的

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

3 个答案: