The following code is working on chrome perfectly but not in mozilla, kindly check and reply as soon as possible, thanx in advance.
以下代码正在完美地处理chrome,但不是在mozilla中,请尽快检查并回复,而不是提前。
My html is:
我的HTML是:
<div class="about-bg">
<div class="about-us-heading">About<br>The Apes</div>
</div>
and my css:
和我的css:
.about-bg {
background-color: #fff;
float: left;
margin-right: 90px;
padding: 80px 20px 40px 0;
}
.about-us-heading {
font-size: 92px;
text-transform: uppercase;
font-family: 'Lato', sans-serif;
font-weight: 900;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-image: url("http://creativeapes.net/wp-content/uploads/2016/02/building-back.jpg");
background-position: -1px -82px;
background-repeat: no-repeat;
line-height: 95px;
}
here is my website link http://creativeapes.net/#about-us
这是我的网站链接http://creativeapes.net/#about-us
3 个解决方案
#1
1
-webkit-text-fill-color
is non-standard
-webkit-text-fill-color是非标准的
source: https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-text-fill-color
#2
0
If you want to use background-clip: text it's only available in WebKit based browser and it is not available in Firefox. Therefore you can use this polyfill - https://github.com/TimPietrusky/background-clip-text-polyfill
如果你想使用background-clip:text,它只能在基于WebKit的浏览器中使用,并且在Firefox中不可用。因此,您可以使用此polyfill - https://github.com/TimPietrusky/background-clip-text-polyfill
It works perfectly in Firefox and it replaces the specified dom element with a SVG. The only problem is that the SVG text cannot work with line breaks, so your content will be in one line.
它在Firefox中完美运行,它用SVG替换指定的dom元素。唯一的问题是SVG文本无法使用换行符,因此您的内容将在一行中。
var element = document.querySelector('.myelement');
/*
* Call the polyfill
*
* patternID : the unique ID of the SVG pattern
* patternURL : the URL to the background-image
* class : the css-class applied to the SVG
*/
element.backgroundClipPolyfill({
'patternID' : 'mypattern',
'patternURL' : 'url/to/your/pattern',
'class' : 'myelement'
});
Here is live example: http://codepen.io/TimPietrusky/pen/cnvBk
这是现场示例:http://codepen.io/TimPietrusky/pen/cnvBk
#3
0
the below link is the answer view and enjoy
以下链接是答案视图并享受
https://github.com/TimPietrusky/background-clip-text-polyfill
#1
1
-webkit-text-fill-color
is non-standard
-webkit-text-fill-color是非标准的
source: https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-text-fill-color
#2
0
If you want to use background-clip: text it's only available in WebKit based browser and it is not available in Firefox. Therefore you can use this polyfill - https://github.com/TimPietrusky/background-clip-text-polyfill
如果你想使用background-clip:text,它只能在基于WebKit的浏览器中使用,并且在Firefox中不可用。因此,您可以使用此polyfill - https://github.com/TimPietrusky/background-clip-text-polyfill
It works perfectly in Firefox and it replaces the specified dom element with a SVG. The only problem is that the SVG text cannot work with line breaks, so your content will be in one line.
它在Firefox中完美运行,它用SVG替换指定的dom元素。唯一的问题是SVG文本无法使用换行符,因此您的内容将在一行中。
var element = document.querySelector('.myelement');
/*
* Call the polyfill
*
* patternID : the unique ID of the SVG pattern
* patternURL : the URL to the background-image
* class : the css-class applied to the SVG
*/
element.backgroundClipPolyfill({
'patternID' : 'mypattern',
'patternURL' : 'url/to/your/pattern',
'class' : 'myelement'
});
Here is live example: http://codepen.io/TimPietrusky/pen/cnvBk
这是现场示例:http://codepen.io/TimPietrusky/pen/cnvBk
#3
0
the below link is the answer view and enjoy
以下链接是答案视图并享受
https://github.com/TimPietrusky/background-clip-text-polyfill