html - 使用图像 Sprite 和 CSS 的文本

标签 html css

是否可以在使用 CSS 的网页上为文本使用图像 Sprite ?

font.gif

<html>
    <head>
        <style>
        p { background-image: url('font.gif') }
        p 'character' { width: 4px; height: 5px }
        p 'a' { background-position: 0 0 }
        p 'b' { background-position: -6px 0 }
        p 'c' { background-position: -10px 0 }
        etc...
        </style>
    </head>
    <body>
        <p>This is some test text. It doesn't mean anything.</p>
    </body>
</html>

最佳答案

我不确定您为什么要以这种方式将图形用于文本,但请尝试使用此代码。

<html>
<head>
    <style>
    p { background-image: url('font.gif');width: 4px; height:5px;display:inline-block;}
    p .A { background-position: 0 0 }
    p .B { background-position: -6px 0 }
    p .C { background-position: -10px 0 }
    </style>
</head>
<body>
    <p class="C"></p><p class="A"></p><p class="B"></p>
</body>
</html>

关于html - 使用图像 Sprite 和 CSS 的文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31554905/

相关文章:

css - Wordpress 自定义 Html - 跳转到 anchor 然后滚动

html - CSS 过渡不起作用

javascript - 仅替换段落内的单词

java - 正则表达式从 html 页面中提取 anchor 标记周围的文本

jquery - 添加元素后 position().top 不变

html - 如何在html和css3中制作带有背景色的人物图像

javascript - 弹出窗口的内容未显示(或为白色)

html - Doxygen:如何在所有输出格式的主页上嵌入图像?

python - 如何在 beautifulsoup 中查找 <div><span>text</span></div> 的文本?

php - 清除静态内容缓存后主题损坏 - Magento 2