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