时间戳

首页 > 解决方案 > 如何在 CSS 中覆盖背景颜色？

html - 如何在 CSS 中覆盖背景颜色？

问题描述

我给了我的身体这个属性

body {
    background: linear-gradient(to bottom, rgba(233, 44, 3, 2), rgba(255, 0, 0, 0));
}

和一个 div 这个

div {
    background: linear-gradient(to bottom, rgba(175, 113, 236, 0.8), rgba(175, 113, 236, 0.3));
}

问题是我的 div 中的项目（例如 h1 ）具有主体背景颜色，即使 div 的其余部分具有其他颜色。

如何覆盖 div 中所有元素的主体颜色。

标签： htmlcss

解决方案

这似乎有些不对劲，它应该继承父 div 的颜色，因此请检查您的元素是否正确嵌套，或者您的 div 是否正确包装了其他元素。如果问题依旧，还可以通过多种方式强制背景色继承：

可以使用CSS 中的inherit关键字来完成。您可以在 div 中的每个元素上使用此关键字。

不过，为了提供更多的理解，真正可能发生的是 div 中的元素没有设置背景颜色，因此它们可能会出现“透明”并在下面显示 body 元素颜色。

因此，如果 div 中的每个元素都相同，您可以将它们的背景颜色设置为要匹配的包含 div 的颜色。如果所有元素都是段落，则可以使用诸如 div > p 之类的选择器来完成此操作。

还要记住/注意外部 css 页面、页面级别和内联 css 权重，页面级别分别覆盖外部和内联覆盖页面级别。

推荐阅读