CSS“background-image”属性不会显示图像

zphenhs4  于 2022-12-05  发布在  其他
关注(0)|答案(2)|浏览(138)

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
qni6mghb

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.

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

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

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 or display:block

hk8txs48

hk8txs482#

带文本的span它显示背景图像

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

span无文本它不显示任何内容,因为span本身没有大小

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

因此,请使用background-imagespan中添加一些文本

相关问题