2016-10-20 21 views
6

मेरे मित्र की वेबसाइट पर काम करना और मैं यह नहीं समझ सकता कि फ़ायरफ़ॉक्स में एसवीजी को कैसे प्रदर्शित किया जाए। एज में यह भी गायब हो जाता है जबकि मैं ब्राउज़र का आकार बदल रहा हूं।फ़ायरफ़ॉक्स में एसवीजी पृष्ठभूमि

header::after { 
    content:""; 
    display: block; 
    background: url(/svg-filer/header-background.svg); 
    background-size: contain; 
    background-repeat: no-repeat; 
    top: 0; 
    left:-1%; 
    width: 102% !important; 
    height: 90px !important; 
    position: absolute; 
    z-index: -1; 

    -ms-transition: top ease .5s; 
    -moz-transition: top ease .5s; 
    -webkit-transition: top ease .5s; 
    transition: top ease .5s; 
} 

header.sticky-active::after { 
    top: -20px; 
} 

एसवीजी फ़ाइल::

<?xml version="1.0" encoding="utf-8"?> 
    <!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> 
    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
     width="100%" height="90px" viewBox="0 0 1920 90" preserveAspectRatio="none">  
    <polygon id="XMLID_3_" fill="#FFFF00" points="1,99.7 1399.2,130 1921,99.7 1921,0 1,0 "/> 
    </svg> 
+0

आपका क्या मतलब है "एसवीजी दाहिने प्रदर्शन" द्वारा? एक स्क्रीनशॉट और वांछित परिणाम का एक विस्तृत विवरण सहित आपकी समस्या को देखने में मदद मिलेगी। – Terry

+0

मैंने इसे समझ लिया, मेरा जवाब नीचे है। - धन्यवाद :) –

+0

_ "(मुझे महत्वपूर्ण उपयोग करना है क्योंकि यह वर्डप्रेस है)" _ - आपका मतलब है कि आप बेहतर नहीं जानते? उदाहरण के लिए विशिष्टता के बारे में? – CBroe

उत्तर

1

छवि वास्तव में सफेद, सही है -

http://lene.isreborn.com/ 

सीएसएस (मैं क्योंकि यह Wordpress है महत्वपूर्ण उपयोग करने के लिए)? आप # 000 को भरने के रंग बदलते हैं, तो आप एक छवि देखेंगे:

<polygon id="XMLID_3_" fill="#000" points="1,99.7 1399.2,130 1921,99.7 1921,0 1,0 "/> 

https://jsfiddle.net/fbwsh1pf/

+0

यह देखने के लिए केवल पीला था कि यह कहां है ... लेकिन हाँ, असली रंग सफेद है। :) –

2

मैं अभी मिल गया है: पृष्ठभूमि आकार के साथ 'शामिल' काम नहीं करता है, लेकिन 100% 100%, साथ डेवलपर साइट को देखें Mozilla Background rules
लिंक: See here

header::after { 
    content:""; 
    display: block; 
    background: url(/svg-filer/header-background.svg); 
    background-size: 100% 100% !important; 
    background-repeat: no-repeat; 
    top: 0; 
    left:-1%; 
    width: 102% !important; 
    height: 90px !important; 
    position: absolute; 
    z-index: -1; 

    -ms-transition: top ease .5s; 
    -moz-transition: top ease .5s; 
    -webkit-transition: top ease .5s; 
    transition: top ease .5s; 
} 

header.sticky-active::after { 
    top: -20px; 
} 
संबंधित मुद्दे