将svg图标放置在空跨度内
提问于 2022-08-14 09:24:05
我试图将svg图标放在空的span中，但是如果我没有在span中放任何东西，它就不会显示图标
HTML
<footer>
<span class="popcorn"></span>
<input type="text">
</footer>CSS
footer .popcorn {
background-image: url('./logo.svg');
width: 30px;
background-size: cover;
background-position: center;
display:inline-block;只有当我在span示例中放置某些内容时才能工作：
<span class="popcorn">1</span>
回答 1
Stack Overflow用户
发布于 2022-08-14 09:45:09
背景图像不会影响HTML元素的框模型。因此，在为.popcorn定义宽度时，没有定义高度。
当您将文本内容放入容器中时，例如在您的示例中，您是在隐式地赋予容器文本行高度的高度，即16 in。
试着给.popcorn一个高度，比如30 if，或者像1/1这样的纵横比，看看这是否解决了你的问题。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/73353664
复制相关文章
点击加载更多
腾讯云开发者
