如何在所有浏览器中进行此转换工作？它仅在Chrome中运行，尽管我已将这些值应用于所有浏览器。（我也尝试过在其他计算机上，但我得到了相同的结果）：仅在Chrome中使用CSS3转换

.titlu 
{ 
    background:url(images/titlu.png); 
    background-repeat: no-repeat; 
    width:716px; 
    height: 237px; 
    display: block; 
    position: absolute; 
    top:460px; 
    right: 255px; 
    z-index: 5; 
    -webkit-transition: background 0.20s linear; 
    -moz-transition: background 0.20s linear; 
    -o-transition: background 0.20s linear; 
    transition: background 0.20s linear; 
} 

.titlu:hover 
{ 
    width:716px; 
    height: 237px; 
    display: block; 
    z-index: 5; 
    background-repeat: no-repeat; 
    background-image:url(images/titlu2.png); 
}

我一直问到指定问题的更详细...我的意思通过不工作是WebKit的效果不适用于图像...悬停的作用只是过渡不生效。

2013-03-14 Alex Timuş

使用JavaScript。 – 2013-03-14 22:59:42

1）仅将过渡应用于“背景图像”。 'transition：background-image .2s linear;'2）“不工作”并不能告诉我们多少，如果有的话。问题具体是什么？ – Shmiddty 2013-03-14 23:01:05

我知道Javascript会完成这项工作，但我更喜欢使用CSS3。无论如何，如果你知道一个简单的方法来达到相同的效果，但在同一时间保持简单随时提供帮助:) – 2013-03-14 23:09:17

据我所知，现在只有在Chrome 18+，iOS6（也许其他WebKit浏览器？在Win 7上的Safari中无法使用）的情况下，淡入淡出的图像才起作用。为了模拟相同的效果，你可以做的是在绝对定位的子节点上设置第二个图像（并且我说的是child而不是伪元素的原因是伪元素上的转换在其他浏览器中还没有工作，除了Firefox）占用与父项相同的空间，并将该子项的opacity从0更改为1悬停在父项上。

demo

HTML：

<h1 class='titlu'> 
    <div class='secondary-bg'></div> 
</h1>

CSS：

.titlu { 
    position: absolute; 
    background: url(http://imgsrc.hubblesite.org/hu/db/images/hs-2013-06-a-web.jpg) 
       no-repeat; 
    background-size: 100% 100%; 
    width: 16em; 
    height: 10em; 
} 
.secondary-bg { 
    position: absolute; 
    width: inherit; height: inherit; 
    opacity: 0; 
    background: inherit; 
    background-image: 
    url(http://imgsrc.hubblesite.org/hu/db/images/hs-2010-13-a-web.jpg); 
    transition: opacity 2s linear; 
} 
.titlu:hover .secondary-bg { opacity: 1; }

来源

2013-03-14 23:57:30 Ana

可选地，可以使用'：before'（或'：after'）替代图像而不是单独的HTML元素，结合使用'.titlu：hover：before'或' .titlu：hover'。 – 2013-03-15 00:06:30

如果在其他浏览器（除Firefox以外）上使用伪元素进行转换，那将会很棒。 – Ana 2013-03-15 00:08:13

感谢您的解决方法 – 2013-03-15 12:37:52

仅在Chrome中使用CSS3转换

回答

demo

相关问题