时间戳

首页 > 解决方案 > 如何在没有包装元素的情况下设置大于元素本身的背景大小

html - 如何在没有包装元素的情况下设置大于元素本身的背景大小

问题描述

假设我有一些简单的 SVG 图标：

<svg class="myclass">
    <use href="#my-icon"/>
</svg>

.myclass {
    width: 22px;
    height: 22px;
    &:hover {
        background: rgba(0,0,0,.1);
        // HOW TO SET BACKGROUND SIZE LARGER THAN ELEMENT SIZE
        border-radius: 50%;
    }
}

是否有任何本机（不是 hacky）CSS 方式来应用更大的背景颜色大小该元素本身 + 应用边框半径？假设我希望背景看起来是 36px；盒子阴影没有帮助。背景大小也是如此。当然，我知道如何使用包装元素来做到这一点，但是我不需要它吗？只需放置您的图标并根据需要应用背景...？

更新：Codepen 设置附录

标签： htmlcsssvgbackgroundelement

解决方案

您的问题是您试图将 Svg 作为普通的 html 元素进行操作，但事实并非如此。Svg 中的所有内容都是其中的一部分，因此您有 2 个选项：

  1. 编辑 Svg 本身。
  2. 添加一个包装器来控制 Svg 在其上的位置。

推荐阅读