为什么文字不是白色的?

Aub*_*bin 1 html5 css3

这是来源:

<!doctype html>
<html>
<head>
   <meta charset="UTF-8" />
   <title>White</title>
   <style>
body {
   background-color: black;
}
.quadrant-legend {
    position: absolute;
    left    :  28px;
    width   : 288px;
    height  :  62px;
}
.quadrant-legend-img {
    position: absolute;
    top     : 0;
    left    : 0;
    z-index : 3;
}
.quadrant-legend-btn {
    position: absolute;
    top     :  6px;
    right   : 34px;
    z-index : 3;
}
.quadrant-legend-text {
    margin-left: 16px;
    margin-top : 16px;
    font-family: arial, sans-serif;
    font-size  : 26px;
    color      : white;
    z-index    : 4;
}
#quadrant-legend-asset {
    top: 60px;
    z-index: 4;
}
   </style>
</head>
<body>
   <div id="quadrant-legend-asset" class="quadrant-legend">
      <img class="quadrant-legend-img" src="images/quadrant-bg.svg" />
      <img class="quadrant-legend-btn" src="images/quadrant-asset-btn.svg" />
      <p class="quadrant-legend-text">lightblue text</p>
   </div>
   <p class="quadrant-legend-text">white text</p>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)

结果,由Firefox或Chrome显示

白色变成浅蓝色

问题是:为什么白色文字变成浅蓝色?

注意:我添加了一些z-indexCSS指令而没有任何影响.

agh*_*ini 5

z-index属性仅适用于定位元素(请参阅文档).可能您的images/quadrant-bg.svg图像部分透明,并显示在文本的顶部.

添加position: relative.quadrant-legend-text选择器,你应该没事.