背景颜色不继承答案

【问题标题】：Background color not inheriting背景颜色不继承
【发布时间】：2016-02-27 16:42:01
【问题描述】：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<style>
.ribbon-left {left: 10px;top: 20px; width: 400px; height: 300px;position: absolute;}

    .css-table {display: table;margin: 0;padding: 0;background-color: red;}
    .css-row { display: table-row; }
    .css-cell {display: table-cell;vertical-align: middle; }

    .ribbon-left-middle {width: 80%;bottom: 0;padding-left: 5px;position: relative; }
    .ribbon-left-middle-inner {top: 5px;position: absolute;}

</style>
</head>
<body>
<div class="ribbon-left">
    <div class="css-table">
        <div class="css-row">
            <div class="css-cell ribbon-left-middle">
                <div class="ribbon-left-middle-inner">
                    <div class="productElements">Product elements</div>
                    <div class="productDescription">Product description</div>
                    <div class="productUsage">Product usage</div>
                </div>
            </div>
        </div>
    </div>
</div>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<style>
.ribbon-left {left: 10px;top: 20px; width: 400px; height: 300px;position: absolute;}

    .css-table {display: table;margin: 0;padding: 0;background-color: red;}
    .css-row { display: table-row; }
    .css-cell {display: table-cell;vertical-align: middle; }

    .ribbon-left-middle {width: 80%;bottom: 0;padding-left: 5px;position: relative; }
    .ribbon-left-middle-inner {top: 5px;position: absolute;}

</style>
</head>
<body>
<div class="ribbon-left">
    <div class="css-table">
        <div class="css-row">
            <div class="css-cell ribbon-left-middle">
                <div class="ribbon-left-middle-inner">
                    <div class="productElements">Product elements</div>
                    <div class="productDescription">Product description</div>
                    <div class="productUsage">Product usage</div>
                </div>
            </div>
        </div>
    </div>
</div>

这是我的例子。我已经为 css 表父 div 定义了红色背景颜色。为什么子div中的文本没有红色背景？背景不是传给孩子的吗？

相同的示例只是我有多个“css-cell” div，红色背景在那里。我应该在这里改变什么？

【问题讨论】：

您可以将子元素的背景颜色设置为“继承”
你能接受答案吗？

标签： html css

【解决方案1】：

背景颜色不被继承。查看文档：https://developer.mozilla.org/en-US/docs/Web/CSS/background-color

不过，它默认为透明，因此看起来像是继承的。

但是，你的问题在这里：.ribbon-left-middle-inner {top: 5px;position: absolute;}

通过绝对定位元素，它的父元素是空的并且没有大小。使用您的浏览器元素检查器。

更改为：.ribbon-left-middle-inner {top: 5px;}

【讨论】：

谢谢。删除绝对值时，它可以工作。但完全相同的例子，只是我在“css-row”中有3个div（“css-cell ribbon-left-top”，“css-cell ribbon-left-middle”，“css-cell ribbon-left-bottom ")，背景颜色存在于所有 div 中。这怎么可能？
谢谢 :) 我们可以谈谈吗？