Question

因此，当我尝试在某些文本上添加白色时，它在浏览器中没有变化。当我用户检查谷歌浏览器时，它显示文本是“color：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

在这里，它的工作原理是尝试将其设置为重要，或许代码中的其他内容会覆盖它

＆＃13;

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;
}

＆＃13;

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

＆＃13;

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

使用Hex代码而不是颜色名称总是更好。这样，您可以确保每个浏览器都支持您的代码：

#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 个答案: