-moz-background-clip:text 在 Firefox 中不起作用 [英] -moz-background-clip:text does not work in Firefox

问题描述

我正在尝试通过图像填充 h1 标签中的文本内容.根据我的理解 ;-)，我在 html 中执行以下操作:

<h1>我的精彩文字

在 css 文件中:

.image_clip{背景:url(../images/default.png) 重复；-moz-background-clip:文本；-moz-text-fill-color:透明；-webkit-background-clip:文本；-webkit-text-fill-color:透明；}

事实是它没有产生预期的结果……即带有图像颜色的文本.图像显示在 div 的整个背景上，而不仅仅是在文本后面.此外，文本本身仍然是黑色的.

我正在 Firefox 上尝试这样做.没有其他浏览器.

我错过了什么吗?

谢谢你的帮助.

解决方案

虽然 -webkit-background-clip:text 存在，-moz-background-clip:text 没有，所以你将无法实现你的裁剪Firefox 中的效果.(除非有其他我想不到的方法.)

-moz-text-fill-color，虽然你可以只使用 color:transparent，只要元素没有其他任何东西(例如边框，-wekbit-text-stroke) 您希望可见.

您的代码确实适用于 Chrome 和 Safari:

• http://jsfiddle.net/7T8am/2/

然而，

的文本确实需要透明，所以如果任何其他 CSS 代码为

设置颜色，你需要覆盖它.

I'm trying to fill in the content of a text in a h1 tag by an image. Following my understanding ;-), I'm doing the following in the html:

<div class="image_clip">
 <h1>
  MY WONDERFULL TEXT
 </h1>
</div>

And in the css file:

.image_clip{
 background: url(../images/default.png) repeat;
 -moz-background-clip: text;
 -moz-text-fill-color: transparent;
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
}

The fact is that it does not yield the expected result... that is the text with the image in it as color. The image is displayed on the entire background of the div and not only behind the text. The text itself is moreover still in black.

I'm trying that on Firefox. Don't have other browsers.

Did I missed something?

Tks for the help.

解决方案

Whilst -webkit-background-clip:text exists, -moz-background-clip:text does not, so you won’t be able to achieve your clipping effect in Firefox. (Unless there’s another way I can’t think of.)

Neither does -moz-text-fill-color, although you could just use color:transparent, as long as the element doesn’t have anything else (e.g. borders, -wekbit-text-stroke) that you want to be visible.

Your code does work in Chrome and Safari:

• http://jsfiddle.net/7T8am/2/

However, the <h1>’s text does need to be transparent, so if any other CSS code is setting a colour for the <h1>, you’ll need to override it.

这篇关于-moz-background-clip:text 在 Firefox 中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！