英文:
Is it possible append an image inside text in html,css,or javascript, without photoshop?
问题
当我说“在文本中插入图像”时，我的意思是：
如果我有以下代码：
<h1><center><a href="https://www.reddit.com/u/mxxxxx/" title="Reddit account">My name</a></center></h1>
我想要在“My name”上应用一张图像，使其看起来像上面YouTube视频中显示的示例。我可以在Photoshop中轻松完成这个操作。但如何在HTML/CSS/JavaScript中实现呢？
英文:
What I am meaning when I say "append an image inside text":
https://www.youtube.com/watch?v=ervZqx2N-8c
If I have the following code:
<h1><center><a href="https://www.reddit.com/u/mxxxxx/" title="Reddit account">My name</a></center></h1>
I want to apply an image to "my name," so that it looks like the example shown in the Youtube video above. I can easily do this in photoshop. But how would I do this in html/css/javaScript?
答案1
得分: 1
当然，只需使用background: -webkit-linear-gradient和-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;
}
<h1>Hello World</h1>
英文:
Of course, just use background: -webkit-linear-gradient and -webkit-text-fill-color
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
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;
}
<!-- language: lang-html -->
<h1>Hello World</h1>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论