1

我是网络开发的新手（并且是自学的），所以如果这是一个愚蠢的问题，请原谅。

如何在图标内显示文本？例如心脏内的数字等。我为此目的假设 webfont 图标不起作用？使用 CSS 形状是否更好地达到此目的 - 以便在调整大小等时呈现？或者是矢量更好的选择。

这是我打算使用的心脏 CSS。但我不清楚如何在里面显示文本。

    .heart {
        position: relative;
        width: 100px;
        height: 90px;
    }
    .heart:before,
    .heart:after {
        position: absolute;
        content: "";
        left: 50px;
        top: 0;
        width: 50px;
        height: 80px;
        background: #fc2e5a;
        -moz-border-radius: 50px 50px 0 0;
        border-radius: 50px 50px 0 0;
        -webkit-transform: rotate(-45deg);
           -moz-transform: rotate(-45deg);
            -ms-transform: rotate(-45deg);
             -o-transform: rotate(-45deg);
                transform: rotate(-45deg);
        -webkit-transform-origin: 0 100%;
           -moz-transform-origin: 0 100%;
            -ms-transform-origin: 0 100%;
             -o-transform-origin: 0 100%;
                transform-origin: 0 100%;
    }
    .heart:after {
        left: 0;
        -webkit-transform: rotate(45deg);
           -moz-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
             -o-transform: rotate(45deg);
                transform: rotate(45deg);
        -webkit-transform-origin: 100% 100%;
           -moz-transform-origin: 100% 100%;
            -ms-transform-origin: 100% 100%;
             -o-transform-origin: 100% 100%;
                trans.orm-origin :100% 100%;
}

提前致谢！

4

1 回答 1

2

这是我的解决方案

我在标签span之间插入了一个。div这样，就像 mbratch 所说，您可以将z-index属性设置为更高的值。这将与 一起position:absolute为您提供所需的内容。

我使用 jQuery 将其垂直居中，以防您想要多行文本

于 2013-05-22T17:51:36.933 回答