css - 创建透明的透视或纹理字体样式

标签 css html fonts

是否可以指定字体样式(字体颜色等),这样我就可以:

  • 将一个 HTML 元素放在另一个元素之上,并使字体透明,这样我就可以让文本穿过顶部元素并通过字母区域看到底部元素的内容?

  • 用图像指定文本(例如/至少不是动画),这样我就可以使用带纹理的文本而不是纯色?

使用任何 CSS 级别/版本、HTML5 或某些 native 网络浏览器规范是否可能?

是否可以至少使用 Canvas 来检测每个字母的区域,还是应该完全手动完成,或者在纯 HTML/HTML5/CSS 中是不可能的?

最佳答案

我认为您所说的第一个类似于 Illustrator 中的剪贴蒙版?如果是这样,则说明有一个 background-clip 功能 here on CSS-Tricks然而,目前这仅支持 webkit 浏览器,我不确定 IE10,因为它比其他 IE 版本具有更多的兼容性。

快速 Google 搜索“带 CSS 的图案文本”已显示 this page这解释了它。

编辑----------------

对于 webkit 浏览器它是 webkit-background-clip 而对于 IE9+ 它只是 background-clip

关于css - 创建透明的透视或纹理字体样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15044120/

相关文章:

css - 苹果设备不呈现字体

html - 背景颜色不会填充整个背景到边框边缘

javascript - 我在 Codepen 上的一个元素不再工作了

javascript - 使用 JavaScript 获得最高 margin

css - Bootstrap 没有 'Access-Control-Allow-Origin' header

android - 在 android 应用程序中显示印地语/泰米尔语/泰卢固语文本

css - 固定 header 重叠

css - Bootstrap - 表在列中重叠

javascript - 使用 jQuery HTML 更新表格行

html - 表格边框折叠不适用于内联 block ?