Html 图标没有显示

在“Codepen.io”中，我找到了一个很好的CSS，用于我想要使用的圆形菜单。(). 但正如您所看到的，标签（按钮）是空的。里面应该有图像。我已经用一个随机图像（）对此进行了测试。不幸的是，什么也没有出现

它是关于以下CSS代码的：

.cssplay-menu .segment label {
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 50%;
  height: 50%;
  background: #008080;
  border: 1px solid #fff;
  cursor: pointer;
  transform-origin: left top;
  transition: 0.25s cubic-bezier(0, 0, 1, 1);
  transition: 0.25s ease;
}

---

您需要调整一些CSS以使其可见，因为它们实际上是隐藏的：

.cssplay-menu .segment label span {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  right: 50%; /*changed*/
  bottom: 10%; /*changed*/
  margin: auto;
  width: 35px;
  height: 35px;
  background-position: center center;
  background-repeat: no-repeat;
}

完整代码

.cssplay菜单{
-webkit框大小：边框框；
-moz框大小：边框框；
框大小：边框框；
位置：相对位置；
利润率：20px自动0；
宽度：100%；
最大宽度：568px；
身高：0；
-webkit点击高亮显示颜色：rgba（0,0,0,0）；
变换：translate3d（0,0,0）；
}
.cssplay菜单>div{
位置：相对位置；
边缘底部：250px；
垫底：100%；
最大宽度：100%；
身高：0；
}
.cssplay菜单*{
-webkit框大小：边框框；
-moz框大小：边框框；
框大小：边框框；
}
.cssplay菜单.支架{
位置：相对位置；
垫底：100%；
最大宽度：100%；
身高：0；
溢出：隐藏；
}
.cssplay菜单输入{
位置：绝对位置；
显示：无；
}
.cssplay菜单.segment{
位置：绝对位置；
z指数：100；
左：50%；
最高：50%；
左边缘：-48%；
利润率最高：-48%；
宽度：96%；
身高：96%；
边界半径：50%；
溢出：隐藏；
变换：比例（0）；
过渡：0.5s立方贝塞尔（.58,2.4,0.5,0.5）；
过渡：0.5s缓解；
}
.cssplay菜单.曲线上方{
位置：绝对位置；
左：1%；
最高：1%；
宽度：98%；
身高：98%；
背景：#fff；
边界半径：50%；
变换：比例（0）；
转换：0s；
}
.cssplay菜单。曲线下降{
位置：绝对位置；
左：0；
排名：0；
宽度：100%；
身高：100%；
边界半径：50%；
溢出：隐藏；
变换：旋转（-140度）比例（0）；
转换：0s；
}
.cssplay菜单.curve{
显示：块；
位置：绝对位置；
左：50%；
最高：50%；
宽度：100%；
身高：100%；
背景：#8万；
变换原点：左上；
变换：旋转（0度）倾斜（50度）；
}
.cssplay菜单.段标签{
显示：块；
位置：绝对位置；
左：50%；
最高：50%；
宽度：50%；
身高：50%；
背景#008080；
边框：1px实心#fff；
光标：指针；
变换原点：左上；
过渡：0.25s三次贝塞尔（0,0,1,1）；
过渡：0.25秒缓解；
}
.cssplay菜单.段标签范围{
显示：块；
位置：绝对位置；
左：0；
排名：0；
右：50%；
底部：10%；
保证金：自动；
宽度：35px；
高度：35px；
背景：url(https://image.flaticon.com/icons/svg/771/771605.svg);
背景位置：中心；
背景重复：无重复；
}
.cssplay菜单.段标签：第n个类型（1）{
变换：倾斜旋转（-140度）（50度）；
}
.cssplay菜单.段标签：第n个类型（2）{
变换：倾斜旋转（-100度）（50度）；
}
.cssplay菜单.段标签：第n个类型（3）{
变换：倾斜旋转（-60度）（50度）；
}
.cssplay菜单.段标签：第n个类型（4）{
变换：倾斜旋转（-20度）（50度）；
}
.cssplay菜单.段标签：第n个类型（5）{
变换：倾斜（50度）旋转（20度）；
}
.cssplay菜单.段标签：第n个类型（6）{
变换：倾斜（50度）旋转（60度）；
}
.cssplay菜单.段标签：第n个类型（7）{
变换：旋转（100度）倾斜（50度）；
}
.cssplay菜单.段标签：第n个类型（8）{
变换：旋转（140度）倾斜（50度）；
}
.cssplay菜单.段标签：第n个类型（9）{
变换：旋转（180度）倾斜（50度）；
}
.cssplay菜单。段标签：类型（1）跨度的第n个{
变换：倾斜（-50度）旋转（0度）；
}
.cssplay菜单。段标签：类型（2）跨度的第n个{
变换：倾斜（-50度）旋转（-40度）；
}
.cssplay菜单。段标签：第n个类型（3）跨度{
变换：倾斜（-50度）旋转（-80度）；
}
.cssplay菜单。段标签：第n个类型（4）跨度{
变换：倾斜（-50度）旋转（-120度）；
}
.cssplay菜单。段标签：第n个类型（5）跨度{
变换：倾斜（-50度）旋转（-160度）；
}
.cssplay菜单。段标签：第n个类型（6）跨度{
变换：倾斜（-50度）旋转（-200度）；
}
.cssplay菜单。段标签：第n个类型（7）跨度{
变换：倾斜（-50度）旋转（-240度）；
}
.cssplay菜单。段标签：第n个类型（8）跨度{
变换：倾斜（-50度）旋转（-280度）；
}
.cssplay菜单。段标签：第n个类型（9）跨度{
变换：倾斜（-50度）旋转（-320度）；
}
.cssplay菜单.center{
显示：块；
位置：绝对位置；
z指数：200；
左：50%；
最高：50%；
左边缘：-20%；
利润率最高：-20%；
宽度：40%；
身高：40%；
边界半径：50%；
背景：#8b0000 url（cubic/settings.png）无重复中心；
溢出：隐藏；
光标：指针；
盒影：02px#fff；
}
.cssplay菜单#切换：选中+.holder.segment{
过渡：0.5s立方贝塞尔（.58,3,0.5,0.5）；
过渡：0.5s缓解；
变换：比例（1）；
}
.cssplay菜单#切换：选中+.holder.center{
过渡：0.5s立方贝塞尔（.58,3,0.5,0.5）；
过渡：0.5s缓解；
转换：比例（1.2）；
}
.cssplay菜单#切换：选中+.holder.curve upper{
过渡：0.5s立方贝塞尔（.58,3,0.5,0.5）；
过渡：1s轻松；
变换：比例（1）；
}
.cssplay菜单#切换：选中+.holder.curve lower{
过渡：0.5s立方贝塞尔（.58,3,0.5,0.5）；
过渡：1s轻松；
变换：旋转（-140度）比例（1）；
}
.cssplay菜单#c1:选中~.holder.段标签：第n个类型（1），
.cssplay菜单#c2:选中~.holder.段标签：第n个类型（2），
.cssplay菜单#c3:选中~.holder.段标签：第n个类型（3），
.cssplay菜单#c4:选中~.holder.段标签：第n个类型（4），
.cssplay菜单#c5:选中~.holder.段标签：第n个类型（5），
.cssplay菜单#c6:选中~.holder.段标签：第n个类型（6），
.cssplay菜单#c7:选中~.holder.段标签：第n个类型（7），
.cssplay菜单#c8:选中~.holder.段标签：第n个类型（8），
.cssplay菜单#c9:选中~.holder.段标签：第n个类型（9）{
背景：#eb8c00；
}
.cssplay菜单#c1:checked~#切换：checked~.holder.curve lowe