背景图像过渡解决方法答案

【问题标题】：background-image transition workaround背景图像过渡解决方法
【发布时间】：2016-12-15 16:30:07
【问题描述】：

我正在尝试在对象悬停时应用过渡 "background-image"，我发现只有 Chrome 支持此功能。这个问题有什么解决方法吗？

如果有任何改变，我将使用 SVG 作为背景。

【问题讨论】：

99% 的发布问题都需要MCVE (Minimal, Complete, and Verifiable Example)。请发布与您的问题相关的 JavaScript/jQuery、CSS 和 HTML。使用以下任何或所有服务创建演示：jsFiddle.net、CodePen.io、Plunker.co、JS Bin 或 sn-p（位于文本编辑器工具栏或 CTRL+M 上的第 7 个图标）。
添加一些代码@kannan
This 值得参考

标签： html css svg

【解决方案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

【讨论】：

如果您删除所有这些感叹号，您的帖子会看起来更好......它们会增加很多噪音

【解决方案2】：

参考：“SVG is supported in Firefox?”。
用于 SVG 背景过渡的 CSS：

.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
{
    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;
}

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

This fiddle

【讨论】：