文章/答案/技术大牛

发布

社区首页 >问答首页 >将svg图标放置在空跨度内

问将svg图标放置在空跨度内
EN

Stack Overflow用户

提问于 2022-08-14 17:24:05

回答 1查看 110关注 0票数 0

我试图将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>

发布于 2022-08-14 17:45:09

背景图像不会影响HTML元素的框模型。因此，在为.popcorn定义宽度时，没有定义高度。

当您将文本内容放入容器中时，例如在您的示例中，您是在隐式地赋予容器文本行高度的高度，即16 in。

试着给.popcorn一个高度，比如30 if，或者像1/1这样的纵横比，看看这是否解决了你的问题。

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/73353664

复制

相似问题

问将svg图标放置在空跨度内EN