背景顏色不繼承

<!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的相同示例，紅色背景在那裏。我應該在這裏改變什麼？

來源

2016-02-27 Simon

您可以設置子元素，以「繼承」 – IeuanG

的背景顏色，你可以接受的答案嗎？ –

背景顏色不被繼承。檢查文檔：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;}

來源

2016-02-27 16:51:37 dan08

謝謝。當刪除絕對，它的作品。但完全相同的例子，只有我有3 div的內部「css行」（「css單元格帶左上角」，「css單元格帶左中間」，「css單元格帶左底部「），背景顏色存在於所有div中。這怎麼可能？ – Simon

謝謝:)我們可以談談嗎？ –

背景顏色不繼承

回答

相關問題