如何通过 CSS 将模式写入书面文本?

发布于 2024-11-24 05:47:39 字数 1468 浏览 1 评论 0原文

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

猫腻 2024-12-01 05:47:39

@加戈;您可以使用 css3 background Clip 属性。

例如
css:

p {
   color: white;
   background: url(images/fire.jpg) no-repeat;
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
}

查看此链接了解更多信息http://css-tricks.com/7850 -文本下的图像/

@gago; you can use css3 background clip proprty.

for example
css:

p {
   color: white;
   background: url(images/fire.jpg) no-repeat;
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
}

check this link for more http://css-tricks.com/7850-image-under-text/

夜声 2024-12-01 05:47:39

-webkit-background-clip 完成这项工作

HTML

<前><代码> <标题>

BBrainz:: 神奇的触感

CSS

 标头跨度:第一个子级
    {
     字体大小:7em;
     颜色: 白色;
     背景: url("strip.png") 重复中心 center;
     背景大小:6px 6px;
      背景剪辑:内容框;
     -webkit-text-fill-color:透明;
     -webkit-background-clip:文本;
    }

查看结果

此方法仅受 webkit 浏览器支持,这意味着您必须将 color 属性和 background-clip 设置为内容框,以防它在 非 webkit 浏览器中失败

-webkit-background-clip does the job

HTML

   <header>
      <h3><span>B</span><span>Brainz:: An   Amazing Touch</span></h3>
  </header>

CSS

    header span:first-child
    {
     font-size: 7em;
     color: white;
     background: url("strip.png") repeat center center;
     background-size: 6px 6px;
      background-clip: content-box;
     -webkit-text-fill-color: transparent;
     -webkit-background-clip: text;
    }

View result

This method is only supported by webkit browsers which means you must set a color property and background-clip as content-box incase it fails in a non-webkit browser

梦幻的味道 2024-12-01 05:47:39

您拥有的示例图像可以使用包含此类图案的字体来实现。为此,您需要使用 css @font-face 或其他使用自定义字体的方式。


除此之外,我想说你唯一的选择是制作具有特定背景/样式的文本图像。

The example image that you have Could be achieved with a font that has such a pattern in it. For that you would need to use css @font-face or some other way of using custom fonts.


Aside from that I'd say that your only option is to make image of a text with a specific background/styling.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文