CSS问题：为<a>标签设置background-image:url无效，<li>标签正常

嘿，这个问题其实挺常见的，根源就藏在HTML元素的默认显示类型里：

• <li>是块级元素，浏览器默认允许它设置宽高属性，你写的width:50px和height:50px能正常生效，背景图自然有足够的空间展示出来。
• 但<a>标签默认是行内元素啊！行内元素的宽高属性会被浏览器直接忽略——哪怕你手动指定了宽高，浏览器也不会认可，背景图没有可渲染的空间，自然就看不到了。

给你几个快速解决的方案：

方案1：把<a>转成块级/行内块元素 #

这是最直接的办法，只要给<a>添加display属性，让它能接受宽高设置：

#no-work a {
  width: 50px;
  height: 50px;
  background-image: url("http://via.placeholder.com/50x50/0ff");
  display: block; /* 或者用inline-block，根据你的布局需求选择 */
}

方案2：用padding给行内元素创造空间 #

如果你不想修改元素的显示类型，可以用padding代替宽高，同时清除行内元素的默认文本空间：

#no-work a {
  padding: 25px; /* 上下左右各25px，刚好凑成50x50的尺寸 */
  background-image: url("http://via.placeholder.com/50x50/0ff");
  line-height: 0;
  font-size: 0; /* 避免默认文本大小撑出额外空间 */
}

小提示：注意CSS属性大小写 #

你代码里写的Background-image虽然浏览器能兼容，但标准写法是全小写的background-image，建议统一用小写，避免不必要的兼容性问题~

修改完CSS后，你原来的HTML结构不用动，<a>标签的背景图就能正常显示啦！

内容的提问来源于stack exchange，提问作者Vincent Tang