CSS文字不变色

Question

因此，当我尝试在某些文本上添加白色时，它在浏览器中没有更改。 当我在Google Chrome上检查用户时，该文本显示为“颜色：rgb（34，34，34）;”。 在代码中输入“ color：white;”时

HTML：

<div id="features">
    <div id="features-filter"></div>
    <div id="features-text">
        <h1>Features</h1>
    </div>
</div>

CSS：

#features {
    background: url("img/server-room.jpg") no-repeat center;
    background-size: cover;
    position: relative;
    height: 70%;
    z-index: 99;
}

#features-filter {
    position: absolute;
    background: url("img/dot.png") repeat;
    z-index: 999;
    width: 100%;
    height: 100%;
}

#features-text {
    position: absolute;
    z-index: 999;
}

#features-text h1 {
    color: white;
}

Answer 1

这可能是一个缓存问题。

另外，在您的CSS（或其他样式表）中可能会有一条规则，用于在将颜色更改为白色后定义元素的样式。

当您检查它时，“颜色：rgb（34，34，34）;”在哪里？ 样式定义从何而来？ 它是从您编写的＃features-text h1定义的，还是由其他规则定义的（在样式表（或其他样式表）的其他地方）？如果是在其他地方定义的，请确定在何处并确保此规则不存在不会覆盖您定义的样式。

或者，如果它是由无法访问/编辑的样式表应用的，并且需要在样式表中专门定义它，请尝试使用：

#features-text h1 {
   color: white !important;
}

Answer 2

好吧，它在这里尝试将其设置为重要，也许代码中的其他内容会覆盖它

 body{background: gray;} #features { background: url("img/server-room.jpg") no-repeat center; background-size: cover; position: relative; height: 70%; z-index: 99; } #features-filter { position: absolute; background: url("img/dot.png") repeat; z-index: 999; width: 100%; height: 100%; } #features-text { position: absolute; z-index: 999; } #features-text h1 { color: white !important; }

 <div id="features"> <div id="features-filter"></div> <div id="features-text"> <h1>Features</h1> </div> </div>

Answer 3

这样的事情应该做。 显然我将颜色更改为蓝色。

 <!DOCTYPE html>
    <html>
    <head>
    <div id="features">
        <div id="features-filter"></div>
        <div id="features-text">
            <h1>Features</h1>
        </div>

    </div>
    <style>
    #features {
        background: url("img/server-room.jpg") no-repeat center;
        background-size: cover;
        position: relative;
        height: 70%;
        z-index: 99;
    }

    #features-filter {
        position: absolute;
        background: url("img/dot.png") repeat;
        z-index: 999;
        width: 100%;
        height: 100%;
    }

    #features-text {
        position: absolute;
        z-index: 999;
    }

    #features-text h1 {
        color: blue;
    }</style>

    </html>

Answer 4

使用十六进制代码代替颜色名称总是更好。 这样，您可以确保每个浏览器都支持您的代码：

#features-text h1 {
    color: #FFFFFF !important;
}

干杯

Answer 5

将CSS代码包装在样式标签中，然后它将起作用。

<style>
#features {
    background: url("img/server-room.jpg") no-repeat center;
    background-size: cover;
    position: relative;
    height: 70%;
    z-index: 99;
}

#features-filter {
    position: absolute;
    background: url("img/dot.png") repeat;
    z-index: 999;
    width: 100%;
    height: 100%;
}

#features-text {
    position: absolute;
    z-index: 999;
}

#features-text h1 {
    color: white;
}
</style>

Answer 6

您可以使用此CSS代码更改文本颜色

 h1{
 color:#FFF;
}

Answer 7

尝试使用十六进制代码并添加!important ：

h1{
 color:#FFFFFF !important;
}

十六进制代码具有RGB值。 就像RR-GG-BB。

在正常数字上，其计数是这样的：0123456789

您可以像这样计算十六进制数字：0123456789ABCDEF

CSS文字不变色

问题描述

7 个解决方案

解决方案1
3 已采纳 2016-09-09 02:13:30

解决方案2
1 2016-09-09 02:04:14

解决方案3
1 2016-09-09 02:04:30

解决方案4
1 2016-09-09 02:40:02

解决方案5
1 2016-09-09 03:10:13

解决方案6
1 2016-09-09 03:32:20

解决方案7
0 2016-09-09 03:52:10

CSS文字不变色

问题描述

7 个解决方案

解决方案1 3 已采纳 2016-09-09 02:13:30

解决方案2 1 2016-09-09 02:04:14

解决方案3 1 2016-09-09 02:04:30

解决方案4 1 2016-09-09 02:40:02

解决方案5 1 2016-09-09 03:10:13

解决方案6 1 2016-09-09 03:32:20

解决方案7 0 2016-09-09 03:52:10

解决方案1
3 已采纳 2016-09-09 02:13:30

解决方案2
1 2016-09-09 02:04:14

解决方案3
1 2016-09-09 02:04:30

解决方案4
1 2016-09-09 02:40:02

解决方案5
1 2016-09-09 03:10:13

解决方案6
1 2016-09-09 03:32:20

解决方案7
0 2016-09-09 03:52:10