背景圖像轉換解決方法

-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

背景圖像轉換解決方法

回答

相關問題