简体   繁体   English

CSS文字不变色

[英]CSS text not changing color

So when I tried to put a white color on some text it did not change in the browser. 因此,当我尝试在某些文本上添加白色时,它在浏览器中没有更改。 When I user inspect on google chrome it shows that the text is "color: rgb(34, 34, 34);" 当我在Google Chrome上检查用户时,该文本显示为“颜色:rgb(34,34,34);”。 When in the code I put "color:white;" 在代码中输入“ color:white;”时

HTML: HTML:

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

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

It could be a caching issue. 这可能是一个缓存问题。

Alternatively, there might be a rule within your CSS (or another style sheet) that defines the style of the element after you change the color to white. 另外,在您的CSS(或其他样式表)中可能会有一条规则,用于在将颜色更改为白色后定义元素的样式。

When you inspect it, where is the "color: rgb(34, 34, 34);" 当您检查它时,“颜色:rgb(34,34,34);”在哪里? style defined from? 样式定义从何而来? Is it defined from the #features-text h1 that you've written, or is it being defined by another rule, elsewhere in the stylesheet (or another stylesheet?) If it's being defined elsewhere - find out where and make sure this rule isn't overwriting the style you've defined. 它是从您编写的#features-text h1定义的,还是由其他规则定义的(在样式表(或其他样式表)的其他地方)?如果是在其他地方定义的,请确定在何处并确保此规则不存在不会覆盖您定义的样式。

Or, if it's being applied by a style sheet that you can't access/edit and you need to define it in your style sheet specifically, try using: 或者,如果它是由无法访问/编辑的样式表应用的,并且需要在样式表中专门定义它,请尝试使用:

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

Well here it works try to set it important maybe something else in your code overwrites it 好吧,它在这里尝试将其设置为重要,也许代码中的其他内容会覆盖它

 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> 

Something like this should do it. 这样的事情应该做。 Obviously I changed the color to blue. 显然我将颜色更改为蓝色。

 <!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>

Its always better to use Hex Code instead of color name. 使用十六进制代码代替颜色名称总是更好。 This way, you make sure every browser supports your code: 这样,您可以确保每个浏览器都支持您的代码:

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

Cheers 干杯

Wrap your css code in style tags, then it'll work. 将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>

You can change text color by using this css code 您可以使用此CSS代码更改文本颜色

 h1{
 color:#FFF;
} 

try hex code and add !important : 尝试使用十六进制代码并添加!important

h1{
 color:#FFFFFF !important;
} 

the hex code have a RGB value. 十六进制代码具有RGB值。 it's like RR-GG-BB. 就像RR-GG-BB。

On normal number, it's count like this: 0123456789 在正常数字上,其计数是这样的:0123456789

You can count hex number like this: 0123456789ABCDEF 您可以像这样计算十六进制数字:0123456789ABCDEF

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM