Question

我想遮住按钮的右上角，以将徽章像这样放置在按钮的被遮罩/裁剪的部分中。

正确的图像就是我拥有的

我试图在此答案中执行以下操作： How to cut a circular part from an image?

但是似乎该蒙版仅应用于图像，而不应用于按钮

这是我的应用程序中的代码段

domConstruct.create("div", {
    className: 'subCellClass',
    innerHTML : value[i]
}, node);


          <b-button pill
                    class="notification"
                    :class="{ actived: isActive}"
                    @click="showNotif">
            <b-icon-bell></b-icon-bell>
            <span class="badge">3</span>
          </b-button>

Answer 1

一种解决方案可能是将黄色圆圈包裹在另一个div中，以使其耦合空间像素。因此，请在带有2px或3px或4px填充的徽章周围添加包装器。

<div class="badge-wrapper">
  <span class="badge">3</span>
</div>

.badge-wrapper {
  background-color: grey; // same as the background
  padding: 3px;
  border-radius: 50px;
}

然后将定位CSS从徽标移到包装器。

Answer 2

感谢您的回答，但我找到了像您一样的解决方案我在我的徽章跨度之前添加了一个

.badge-hide { position: absolute; top: 10px; margin-left: 2px; padding: 9px 9px; border-radius: 50%; background: #f2f5f8; color: white; } .badge { position: absolute; top: 8px; margin-left: 3px; border-radius: 50%; background: #eec710; color: white; }

我应用了此CSS

class ListItem extends StatefulWidget {
  @override
  _ListItemState createState() => _ListItemState();
}

class _ListItemState extends State<ListItem> {
  bool match = false;

  @override
  Widget build(BuildContext context) {
    return ListTile(
      leading: InkWell(
          onTap: () {
            setState(() {
              match = true;
            });
          },
          child: Icon(match ? Icons.check : Icons.error)),
      title: Text(
        "asd",
      ),
      subtitle: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Row(
            children: [
              Text("subs here.."),
            ],
          ),
        ],
      ),
    );
  }
}

结果：

遮罩/裁剪按钮的右上角

2 个答案: