css - background-color: transparent 在 Safari 和 IE11 浏览器中显示为 background-color: #0000

Question

一些按钮的背景颜色似乎是黑色，当我在浏览器中检查该值时，它显示为 #0000，而我的 CSS 有 background-color: transparent，我尝试将不透明度更改为 0，但即使那样似乎也不起作用。

注意:我没有使用任何 background-image: url 属性，它只是 background-color。我尝试在此处搜索其他答案，但它们似乎不起作用。

汉堡图标:

我的 CSS:

.menu-toggle {
  background-color: #0000;
  border: none;
  color: #333;
  display: block;
  float: left;
  margin-left: .2em;
  padding: .5em;
}

而在我的代码中，我将其编写为透明的。

Answer 1

4 位十六进制符号 #0000 是 CSS Color level 4 的新增内容，自版本 10 起在 Safari 中得到支持。它是有效的 CSS，并且已被 pretty widely supported for almost a year now .¹ 你可以了解更多here .我不知道为什么 Internet Explorer 11 会向您显示该符号，考虑到 Color 4 规范在发布时甚至还没有发布(FPWD 于 2016 年发布，将近三年).甚至 Microsoft Edge 也不支持任何新的颜色符号。

不过，只要您不查看 window.getComputedStyle() 或 Computed Values 部分，浏览器通常会以与您指定的不同的表示法来反射(reflect)计算值检查员的。 transparent 关键字、符号 #0000 和符号 rgba(0, 0, 0, 0) 都等于相同的值，因此不要担心浏览器可能会更改您的 CSS。

---

_{或者超过两年，如果您认为它在 Chrome 52 到 61 的实验性功能标志后可用。}