Question

我正在制作一个带有两种徽标变体的着陆页：蓝色和白色的变化。最好通过一个例子说明这一点：

/**
 * 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>本身时，奇怪的行为消失了，这让我感到困惑和有趣！

思考，解决方案，解释？

Answer 1

这里没有<svg>透明度，这只是一种幻觉。由于

，你的nav元素（小元素）总是在那里，坐在上面

header nav {
  position: fixed;
}

您没有注意到它，因为<img>中唯一的颜色是：

透明
疯狂的蓝色（这是背景）。

添加此代码，您将看到它：

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

P.S：蛋糕是骗人的。

Svg背景覆盖浏览器颜色？

1 个答案: