I'm woriking on a site, and trying to make a sidebar in which I put my image before some text in
<a> </a> tags
I've made a new empty project to test if I messed up something in my previous one, but no Even in a new empty one background image won't show itself here is the code:
<a href='#' title='Građevinski radovi'><span style="background-image: url('./Ikonice/GRADJEVINA.svg')"></span><span class='Title'>Gradjevinski radovi</span></a>
I am working in VS CODE and using "Live Server" extension, saw somewhere on here that might cause a problem, so I opened html noramally without live server, still no luck.
Image of the project
WHAT I TRIED:
I tried putting two dots ".." before the first "/, also tried putting the image in the same folder as "index.html", and not in the "ikonice" folder, but it won't work. Also tried changing
backgroung-image: url
to
background: url
2条答案
按热度按时间qni6mghb1#
The problem is that a span has no size by itself. It grows to its content's size. In your example, there is no content so the span will be of 0px width.
Here's a display of the problem, using just background color but the same is valid for images. I put two divs, one red and one blue, we can only see the blue one since it has text in it.
If you do not want to put text inside, you'll have to give it a width and a height. But since a span is meant to display inline, you'll need to change that too with
display:inline-block
ordisplay:block
hk8txs482#
带文本的span它显示背景图像
span无文本它不显示任何内容,因为
span
本身没有大小因此,请使用
background-image
在span
中添加一些文本