javascript - 文本掩盖了背景

标签 javascript html css

您有一个带有文本的对象(例如 span 或 div)。并且此文本应遮盖对象的彩色背景,以便您可以看到背景(例如 body 元素)。

我知道有“mask-image”。但他们不想进一步开发这种 CSS3 技术。是否有 Javascript 解决方案,以便任何人都可以看到?

有机会做这个跨浏览器吗?

最佳答案

想不出在 javascript 或 html 中执行此操作的技术。然而,一种可以使用的方法(虽然不是完全可取 - 我意识到这将是耗时的)是创建一个透明的 .png对于每个字母,将字母的背景设置为透明,将图像的其余部分设置为某种颜色,然后使用它们。你必须为你想使用的每种颜色制作一整套。你也可以只制作一张图像,它是 .png 中的一个词。并使用更容易的东西。这将是使它适用于所有浏览器的唯一当前方法,包括较旧的浏览器,例如 IE6,在这些浏览器中,新技术不可用。

在我看来,目前这行不通的原因是,当您在 <div> 中包含文本时或 <span>即使文本是透明的,它也只会默认为 <div> 的颜色或 <span> .如果他们的背景设置为透明,那么什么也不会显示。相反,如果设置了颜色,则文本不会显示,因为它只会继承该颜色。

关于javascript - 文本掩盖了背景,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11918101/

相关文章:

javascript - 字符类中如何解释单词字符?

javascript - highcharts 总是控制台有关 bubble_compiled.js 的错误?

html - 编码要通过电子邮件发送的HTML,Outlook中的Google字体默认为Times New Roman,该如何解决?

javascript - 用小数计算 Jquery

php echo div 类不工作

javascript - jQuery 自动完成不能只替换部分输入值

javascript - 激活引导折叠时切换内联 V 形向下

javascript - 如何使用 arcTo 制作眼睛

css - Angular 6 ngModel数据绑定(bind)自动转换大写

html - <li> 中的行内 block 独立边距