背景画像の切り替えの回避策

-2

オブジェクトの移動に「背景画像」を適用しようとしていますが、Chromeのみがこの機能をサポートしていることがわかりました。この問題の回避策はありますか？背景画像の切り替えの回避策

私はSVGを背景として使用しています。

2016-11-21 kanna

99％が[MCVE（** M ** inimal、** C *を有することが要求されます* 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]のいずれかまたはすべてを使用してデモを作成します。 [JS Bin]（https://jsbin.com/）またはスニペット（テキストエディタのツールバーにある7番目のアイコン、またはCTRL + M）をクリックします。 – zer00ne

@kannan –

[** This **]（http://caniuse.com/#feat=svg-css）を参照することは重要です – Vikrant

「SVG is supported in Firefox?」を参照してください。 SVGのbackroundの移行のための
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

出典

2016-11-21 12:55:59 Vikrant

それに対処するためのクリーンな方法は、を使用することです疑似要素。例えば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投稿質問の

出典

2016-11-21 12:59:31 Logeshwaran

これらの感嘆符をすべて削除すると、あなたの投稿はもっと良く見えます。彼らはそれに多くのノイズを追加します – LGSon

背景画像の切り替えの回避策

答えて

関連する問題