为啥我不能在 CSS 中更改文本的颜色？ [复制]

Posted 2023-03-06

【中文标题】为啥我不能在 CSS 中更改文本的颜色？ [复制]

【英文标题】：Why can't I can't change the color of my text in CSS? [duplicate]为什么我不能在 CSS 中更改文本的颜色？ [复制]

【发布时间】：2020-02-29 00:00:43

【问题描述】：

我正在制作带有免责声明的叠加层，并为其添加了样式。出于某种原因，p 元素以不同的颜色显示。它会拒绝更改为黑色。我该如何解决这个问题？

我已经尝试过使用!important 和opacity: 1;

@import url('https://fonts.googleapis.com/css?family=Poppins&display=swap');
@import url('https://fonts.googleapis.com/css?family=Asap');

* 
    margin: 0;
    padding: 0;
    box-sizing: border-box;


body 
    height: 100vh;


.overlay 
    background: rgb(20, 20, 20);
    opacity: 0.4;
    height: 100%;
    align-items: center;
    justify-content: space-around;
    display: flex;


.disclaimer 
    background: white;
    opacity: 1 !important;
    width: 28%;
    height: 28%;
    align-items: center;


.heading-disclaimer 
    color: black !important;
    opacity: 1 !important;
    font-family: Poppins, sans-serif;
    width: 100%;
    z-index: auto;
    text-align: center;


.p-disclaimer 
    padding-top: 20px;
    font-size: 17px;
    z-index: auto;
    opacity: 1 !important;
    font-family: Asap;
    width: 100%;
    color: black !important;
    text-align: center;

<div class="overlay">
            <!-- Roblox Version -->
            <div class="disclaimer">
                <h1 class="heading-disclaimer">Disclaimer</h1>
                <p class="p-disclaimer">
                    Disclaimer!
                </p>
                <button class="ok">OK</button>
            </div>
</div>

我希望颜色是黑色，但是当我这样做时它不会改变color: black;

它变成了一种灰色，可能与覆盖背景的颜色相同。

【问题讨论】：

你能给我们完整的 CSS 吗？我试过你的例子，它显示为黑色。 jsfiddle.net/s25zqfjb

当前示例没有问题，但再次检查您的完整 css 可能在 p 元素颜色上有另一个 css 数据覆盖。还要检查 z-index 层，可能在 p 元素上方显示了不透明的其他元素，所以你觉得 p 颜色不正确

寻求代码帮助的问题必须在问题本身中包含重现该问题所需的最短代码，最好是Stack Snippet。见How to create a Minimal, Reproducible Example

@MenelaosBakopoulos 编辑了它。这是我的完整 CSS。

【参考方案1】：

p 是 overlay 的子元素，因此它的 inherit 是其父元素的 opacity。您只需更改父 background 的 opacity 即可使用 rgba， 改变

.overlay 
    background: rgb(20, 20, 20);
    opacity: 0.4;

到

.overlay 
    background: rgba(20, 20, 20, 0.4);

@import url('https://fonts.googleapis.com/css?family=Poppins&display=swap');
@import url('https://fonts.googleapis.com/css?family=Asap');

* 
    margin: 0;
    padding: 0;
    box-sizing: border-box;


body 
    height: 100vh;


.overlay 
    background: rgba(20, 20, 20, 0.4);
    height: 100%;
    align-items: center;
    justify-content: space-around;
    display: flex;

.disclaimer 
    background: white;
    opacity: 1 !important;
    width: 28%;
    height: 28%;
    align-items: center;


.heading-disclaimer 
    color: black !important;
    opacity: 1 !important;
    font-family: Poppins, sans-serif;
    width: 100%;
    z-index: auto;
    text-align: center;


.p-disclaimer 
    padding-top: 20px;
    font-size: 17px;
    z-index: auto;
    opacity: 1 !important;
    font-family: Asap;
    width: 100%;
    color: black !important;
    text-align: center;

<div class="overlay">
            <!-- Roblox Version -->
            <div class="disclaimer">
                <h1 class="heading-disclaimer">Disclaimer</h1>
                <p class="p-disclaimer">
                    Disclaimer!
                </p>
                <button class="ok">OK</button>
            </div>
</div>