Svg背景重寫瀏覽器顏色？

我正在製作一個帶有兩個徽標變體的着陸頁：藍色和白色變體。這是最好的一個例子來說明：Svg背景重寫瀏覽器顏色？

/** 
 
* Main Color: rgb(130, 153, 230) 
 
*/ 
 

 
body, html { 
 
    margin: 0; 
 
    height: 100%; 
 
} 
 

 
header { 
 
    height: 100%; 
 
    background: rgb(130, 153, 230); 
 
    display: flex; 
 
    flex-direction: column; 
 
    align-items: center; 
 
} 
 

 
section.hero { 
 
    margin-top: 30vh; 
 
    width: 75vw; 
 
    max-width: 300px; 
 
} 
 

 
header nav { 
 
    position: fixed; 
 
    height: 48px; 
 
    width: 100%; 
 
    top: 0; 
 

 
    display: flex; 
 
} 
 

 
header nav img { 
 
    height: 100%; 
 
    margin: 8px; 
 
    margin: 8px auto; 
 
}

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="UTF-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
    <meta http-equiv="X-UA-Compatible" content="ie=edge"> 
 
    <title>Mann Robotics | Robotics Organization in Greenville, SC</title> 
 
    <link rel="stylesheet" href="css/main.css"> 
 
</head> 
 
<body> 
 
    <header> 
 
    <nav class="hero"> 
 
     <img src="https://rawgit.com/MayorMonty/a2b6198126e10a2412acacf6a0a13459/raw/25ca1cc16d3dafb662ed6b32029c24d5d19c6877/logo-blue.svg" alt="Mann Robotics Logo"> 
 
    </nav> 
 
    <section class="hero"> 
 
     <img src="https://rawgit.com/MayorMonty/a2b6198126e10a2412acacf6a0a13459/raw/25ca1cc16d3dafb662ed6b32029c24d5d19c6877/logo-white.svg" alt="Mann Robotics Logo"> 
 
    </section> 
 
    </header> 
 
    <div style="height: 100vh"></div> 
 
</body> 
 
</html>

還是看這個GIF重建的問題，在我的瀏覽器，Chrome

通知白色背景如何變成透明的，不僅僅是本身！它使父母<header>也是透明的。當你將<svg>嵌入<html>本身時，這讓我感到困惑並且非常有趣，這種奇怪的行爲會消失嗎？

想法，解決方案，解釋？

來源

2017-01-08 MayorMonty

這裏沒有<svg>透明度，這只是一個幻覺。您的導航元素（小一）是永遠存在的，因爲坐的

header nav { 
    position: fixed; 
}

你不會注意到它的頂部，因爲在<img>唯一的顏色是：

透明
瘋狂的藍色（這是背景）。

添加該代碼，你會看到它：

header nav img { 
    border: 1px solid white; 
}

P.S：蛋糕是一個謊言。

來源

2017-01-08 23:59:30

哦，這是鬼鬼祟祟的！謝謝！ – MayorMonty

Svg背景重寫瀏覽器顏色？

回答

相關問題