Question

在FeatureDiscovery页面上，他们在右下角有一个FAB按钮（http://materializecss.com/feature-discovery.html）。我想用.png图像替换这个按钮 - 像这样的圆形图像：https://s-media-cache-ak0.pinimg.com/originals/3b/44/d4/3b44d4a91a8cd625984fb30451cf6686.png。这有可能吗？

如果是这样，你能指导我怎么做吗？

感谢。

Answer 1

我为你做了这个fiddle。你的意思是这样的吗？

#icon {
  z-index: 10;
  position: fixed;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  bottom: 5%;
  right: 5%;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  cursor: pointer;
}

.fab-img {
  width: 100%;
  height: 80px;
}

<div id="icon">
  <div id="wrapper">
    <img class="fab-img" src="https://s-media-cache-ak0.pinimg.com/originals/3b/44/d4/3b44d4a91a8cd625984fb30451cf6686.png"/>
  </div>
</div>

您还可以使用代码段

中包含的img标记替换<i class="material-icons">menu</i>

MaterializeCSS使用图标作为FAB按钮[FeatureDiscovery]

1 个答案: