是否可以在没有 Photoshop 的情况下在 html、css 或 javascript 的文本中附加图像？ [复制]答案

【问题标题】：Is it possible append an image inside text in html,css,or javascript, without photoshop? [duplicate]是否可以在没有 Photoshop 的情况下在 html、css 或 javascript 的文本中附加图像？ [复制]
【发布时间】：2020-04-22 02:58:35
【问题描述】：

当我说“在文本中附加图像”时，我的意思是： https://www.youtube.com/watch?v=ervZqx2N-8c

如果我有以下代码：

<h1><center><a href="https://www.reddit.com/u/mxxxxx/" title="Reddit account">My name</a></center></h1>

我想将图像应用到“我的名字”，使其看起来像上面 Youtube 视频中显示的示例。我可以在 Photoshop 中轻松做到这一点。但是我将如何在 html/css/javaScript 中执行此操作？

【问题讨论】：

考虑这个技巧：css-tricks.com/image-under-text
干杯 @Zim84 这就是我要找的答案。
也是stackoverflow.com/questions/10957082/…的副本

标签： javascript html css

【解决方案1】：

当然，只要使用background: -webkit-linear-gradient and -webkit-text-fill-color

    h1 {
      color: red;
      -webkit-text-fill-color: transparent;
      background: -webkit-linear-gradient(transparent, transparent),
                 url(https://cosmos-images2.imgix.net/file/spina/photo/18032/190218-mount-full.jpg?ixlib=rails-2.1.4&auto=format&ch=Width%2CDPR&fit=max&w=835) repeat;
      background: -o-linear-gradient(transparent, transparent);
      -webkit-background-clip: text;
      text-transform: uppercase;
      Font-size:80px;
    }

&lt;h1&gt;Hello World&lt;/h1&gt;

【讨论】：

请考虑兼容性，因为这可能只适用于 webkit 浏览器
caniuse.com/#search=-webkit-text-fill 目前在除 IE 11 之外的所有版本上都可用。唯一的问题是它不是标准功能 :)