css - background-image在edge浏览器无法正常显示问题

问题描述

问 题

如图，此处的background-image在google，opera,firefox浏览器正常显示，但在edge浏览器正常显示，请问问题在哪？？

图片路径是确保正确的

html如下

<figure class="author-image">
                <a class="img01" href="#" style="background-image: url(dist/image/meng_j_lee.png);"><span class="hidden">
                Meng J Lee's Picture</span>
                </a>
            </figure>

css如下

.author-image .img01 {

position: relative;
display: block;
width: 100%;
height: 100%;
background-size: cover;
background-position: center 30%;
border-radius: 100%;

}

解决方案

解决的办法是这样子的：

直接把这个背景图片的格式换成别的。比如之前是png，我换成jpg就ok了。不知道如果换成gif是不是好用，也不知道这个bug是从哪里来的。权当是一个小东西记录下来，万一有别人可以看到了。

不过我又研究了一下，貌似是图片的问题。不清楚这种图片是什么问题，你换了图片后，不管是png还是jpg格式的，都可以显示出来了。

这篇关于css - background-image在edge浏览器无法正常显示问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！