Firefox 背景图像的 CSS3 转换不起作用 [英] CSS3 transition of background-image for Firefox not working
问题描述
我的背景图像转换在 Chrome 中运行良好,但在 Firefox 中不起作用.我是 CSS3 过渡的新手.做了研究,我的语法似乎是正确的.从我读到的 FF 应该支持这一点.我在 FF 12.0 上.为什么这个 CSS3 过渡在 Firefox 中不起作用.
My background-image transition is working fine in Chrome, but does nothing in Firefox. I am new to CSS3 transitions. Did research and my syntax seems to be correct. From what I have read FF should support this. I am on FF 12.0. How come this CSS3 transition does not work in Firefox.
没有 JavaScript.没有解决方法.只是解释为什么会失败会很棒.
No javascript. No workarounds. Just an explanation of why this is failing would be wonderful.
a.call_to_action
{
text-decoration: none;
display: block;
color: #232744;
font-size: 20px;
font-weight: bold;
height: 47px;
width: 185px;
overflow: hidden;
margin: 10px auto 15px auto;
text-align: center;
border: none;
background: yellow;
background-image: url(http://www.pslover.com/images/thumb/2751.jpg);
-webkit-transition: background-image .5s linear;
-moz-transition: background-image .5s linear;
}
a.call_to_action:hover {
background: orange;
background-image: url(http://www.tutorialdash.com/avatars/3b1f70c20325d8676ce1f56cb9b43f17.gif);
color: #4F4246;
}
推荐答案
在 MDN 文档中找到答案.
Found the answer in the MDN docs.
http://oli.jp/2010/css-animatable-properties/#background-image
背景图片
这仍然有点悬而未决,只有渐变"在当前工作草案,当前根本没有背景图像编辑草稿,以及 CSS 中背景图像的Animatable: no"背景和边框模块第 3 级编辑草稿.然而,Chrome 19 Canary 中出现了支持,这是设计师想要.在获得广泛支持之前,这可以通过以下方式伪造图像精灵和背景位置或不透明度.'
This is still a little up in the air, with "only gradients" in the current Working Draft, no background-image at all in the current Editor’s Draft, and "Animatable: no" for background-image in CSS Backgrounds and Borders Module Level 3 Editor’s Draft. However, support has appeared in Chrome 19 Canary, and this is something that designers want. Until widespread support arrives this can be faked via image sprites and background-position or opacity.'
此时我发现实际上没有人支持渐变(Chrome 17、FF 12、IE9).只有 Chrome 支持背景图像(这就是为什么它在 FF 中对我不起作用).
At this time I have found that nobody actually supports gradients (Chrome 17, FF 12, IE9). Only Chrome supports background-image (that's why it doesn't work in FF for me).
这篇关于Firefox 背景图像的 CSS3 转换不起作用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!