-moz-background-clip:text does not work in Firefox

Question

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:

        
                      

              相关标签:
       
      

Answer 1

To get background-clip:text to give the anticipated appearance in Firefox you could use this polyfill - https://github.com/TimPietrusky/background-clip-text-polyfill - that replaces the CSS with an SVG version in non Webkit browsers. [untested but seen working]

Answer 2

You are applying the style to the enclosing div, not the h1 tag. Try changing your selector to be .image_clip h1 {your:styles;}, or alternatively you can leave your CSS the same and apply the class to the h1 with <h1 class="image_clip"></h1>.

Answer 3

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.

Answer 4

Per the standard, the background-clip property (which is implemented without a prefix in Firefox, by the way), doesn't have text value. You're using a proprietary WebKit feature, not a standard CSS property....