CSS背景屬性怪異/不同值

我正在檢查一個網站的代碼，我注意到他們有一個不尋常的值通過CSS元素的背景屬性。這似乎是一個漸變。有誰知道它是什麼？如果它是有效的？哪些瀏覽器支持它？CSS背景屬性怪異/不同值

下面是代碼：

background:transparent url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEwMCAxMDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0iaGF0MCIgZ3JhZGllbnRVbml0cz0ib2JqZWN0Qm91bmRpbmdCb3giIHgxPSI1MCUiIHkxPSIxMDAlIiB4Mj0iNTAlIiB5Mj0iLTEuNDIxMDg1NDcxNTIwMmUtMTQlIj4KPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZiIgc3RvcC1vcGFjaXR5PSIwLjY1Ii8+CjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ZmZiIgc3RvcC1vcGFjaXR5PSIwLjkiLz4KICAgPC9saW5lYXJHcmFkaWVudD4KCjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiBmaWxsPSJ1cmwoI2hhdDApIiAvPgo8L3N2Zz4=);

我明白任何及所有的幫助！

在此先感謝！ :-)

來源

2012-07-15 IrfanM

嗯，第一件事就是把它de-base64：

<?xml version="1.0" ?> 
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none"> 
    <linearGradient id="hat0" gradientUnits="objectBoundingBox" x1="50%" y1="100%" x2="50%" y2="0%"> 
     <stop offset="0%" stop-color="#fff" stop-opacity="0.65" /> 
     <stop offset="100%" stop-color="#fff" stop-opacity="0.9" /> 
    </linearGradient> 
    <rect x="0" y="0" width="100" height="100" fill="url(#hat0)" /> 
</svg>

因此，你可以看到，是的，它是一個梯度。非IE瀏覽器支持這一點，IE 9+也支持它。

來源

2012-07-15 22:09:33

哦好吧，所以它與背景是一樣的.svg文件？並有相同的支持？使用base-64版本比不使用/使用.svg文件版本有什麼優勢？ – IrfanM 2012-07-15 22:40:18

使用base64版本意味着少一個網絡訪問。當然，現在base64版本將會增加33％（3個字符需要4個base64「數字」來編碼），但這對於這麼小的東西無關緊要。有關數據URI支持，請參閱http://caniuse.com/#feat=datauri; IE 8+允許在鏈接的CSS文件中使用它。 – 2012-07-16 16:09:33

它是base64編碼的SVG文件。這種約定是將SVG圖形文件用作嵌入式背景圖像的一種手段。我做同樣的事情與標誌，立即這裏http://mailmarkup.org/slideshow.xhtml

來源

2012-07-15 22:08:19 austincheney

我認爲所有的現代瀏覽器都支持它。這是一個基於64位編碼的可伸縮矢量圖形（經常可以找到那些用於維基百科上的地圖的文件），這意味着它包含許多字節，這些字節將轉換爲用於ASCII字符集。

來源

2012-07-15 22:09:50

CSS背景屬性怪異/不同值

回答

相關問題