CSS "background-image" 属性不显示图像

Question

我在一个网站上工作，并尝试制作一个侧边栏，在其中我将我的图像放在一些文本之前

<a> </a> tags

我做了一个新的空项目来测试我是否搞砸了我以前的项目，但没有即使在一个新的空背景图像中也不会显示自己这里是代码：

<a href='#' title='Građevinski radovi'><span style="background-image: url('./Ikonice/GRADJEVINA.svg')"></span><span class='Title'>Gradjevinski radovi</span></a>

我在 VS CODE 中工作并使用“实时服务器”扩展，看到这里的某个地方可能会导致问题，所以我在没有实时服务器的情况下正常打开 html，仍然没有运气。

项目形象

我试过什么：

我尝试在第一个“/”之前放两个点“..”，也尝试将图像放在与“index.html”相同的文件夹中，而不是放在“ikonice”文件夹中，但它不起作用。还尝试更改

backgroung-image: url 

to

background: url

Answer 1

问题是跨度本身没有大小。 它增长到其内容的大小。 在您的示例中，没有内容，因此跨度将为 0px 宽度。

这是问题的显示，仅使用背景颜色，但同样适用于图像。 我放了两个 div，一红一蓝，我们只能看到蓝色的，因为里面有文字。

 <span style="background:red;"></span> <span style="background:lightblue;">Test</span>

如果您不想在其中放置文本，则必须为其指定宽度和高度。 但是由于 span 意味着内联显示，因此您也需要使用display:inline-block或display:block进行更改

Answer 2

跨越文本显示背景图像

 <a href="#"> <span style="background-image: url('https://picsum.photos/300/200.jpg')">LOREMLOREM</span> <span class='Title'>Gradjevinski radovi</span> </a>

没有文本的跨度它什么都不显示，因为span本身没有大小

 <a href="#"> <span style="background-image: url('https://picsum.photos/300/200.jpg')"></span> <span class='Title'>Gradjevinski radovi</span> </a>

所以在你的span中添加一些文本与background-image