背景图像转换解决方法

-2

我试图在对象悬停上应用转换“background-image”，并且我发现只有Chrome支持此功能。有没有解决这个问题的方法？背景图像转换解决方法

我使用SVG作为背景，如果发生任何变化。

2016-11-21 kanna

99％* * omplete，** V ** erifiable ** E ** xample）]（http://stackoverflow.com/help/mcve）。请发布与您的问题相关的JavaScript/jQuery，CSS和HTML。使用任何或所有以下服务创建演示： [jsFiddle.net]（https://jsfiddle.net/）， [CodePen.io]（https://codepen.io/）， [Plunker。（http://plnkr.co/）， [JS Bin]（https://jsbin.com/）或片段（位于文本编辑器工具栏或CTRL + M上的第7个图标）。 – zer00ne

添加一些代码@kannan –

[** This **]（http://caniuse.com/#feat=svg-css）很重要 – Vikrant

请参阅：“SVG is supported in Firefox?”。
CSS的SVG底色转型：

.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

来源

2016-11-21 12:55:59 Vikrant

干净的方法来处理它是使用: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

贴都要求有一个[MCVE（** M ** inimal，**Ç问题

来源

2016-11-21 12:59:31 Logeshwaran

如果您删除所有感叹号，您的帖子看起来会更好。他们增加了很多噪音 – LGSon

背景图像转换解决方法

回答

相关问题