Question

我尝试在对象悬停时应用转换＆＃34; background-image＆＃34; ，我发现只有Chrome支持此功能。这个问题有解决方法吗？

如果进行任何更改，我会使用SVG作为背景。

Answer 1

处理它的干净方法是使用:after伪元素。

工作Demo

例如： -

a:hover:after {
    content: url(https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png); /* no need for qoutes */
    display: block;
}

工作Demo

Answer 2

参考：＆＃34; SVG is supported in Firefox?＆＃34;。
CSS for SVG backround Transition：

.test:before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40'><circle cx='5' cy='5' r='5' /></svg>");
    background-size: cover;
    z-index: 1;
    transition: opacity 2s;
}

.test:after {
     background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40'><circle cx='20' cy='20' r='10' /></svg>")  no-repeat;
    background-size: cover;
}

工作代码段

＆＃13;

.test
{
    width: 400px;
    height: 300px;
    position: relative;
    border: 1px solid green;
}

.test:before, .test:after {
    content: "";
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    opacity: 1;
}
.test:before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40'><circle cx='5' cy='5' r='5' /></svg>");
    background-size: cover;
    z-index: 1;
    transition: opacity 2s;
}

.test:after {
     background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40'><circle cx='20' cy='20' r='10' /></svg>")  no-repeat;
    background-size: cover;
}

.test:hover:before {
    opacity: 0;
}

＆＃13;

<div class="test">
  
</div>

＆＃13;

This fiddle

背景图片转换解决方法

2 个答案: