Html 使用 CSS 在我的 <div> 元素中填充背景颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21331125/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Fill a background color inside my <div> element using CSS
提问by bali208
I have created a <div>tag css table as required. But I am struck up at one perticular place. I need to fill a background color inside my <div>element. Which attribute is to be used to do so?
我已经<div>根据需要创建了一个标签 css 表。但我对一个特定的地方感到震惊。我需要在我的<div>元素中填充背景颜色。要使用哪个属性来执行此操作？
My code is as follows:
我的代码如下：
<htmL>
<head>
<style>
div.table{
display: table;
}
div.row{
display: table-row;
border-style:solid;
border-color: black;
border-width:15px;
padding-top:35px;
padding-bottom:35px;
padding-right:50px;
padding-left:50px;
margin-top:25px;
margin-bottom:25px;
margin-right:50px;
margin-left:50px;
}
div.cell{
display: table-cell;
border-style: solid;
border-width:15px;
padding-left: 30px;
padding-right: 30px;
padding-top: 30px;
padding-bottom: 30px;
font-weight:5000;
font-size:200%;
}
</style>
</head>
<body>
<div id="table" class="table">
<div id="r1" class="row">
<div id="sys55" class="cell">55
</div>
<div id="sys56" class="cell">56
</div>
<div id="sys57" class="cell">57
</div>
<div id="sys58" class="cell">58
</div>
<div id="sys59" class="cell">59
</div>
<div id="sys60" class="cell">60
</div>
<div id="sys61" class="cell">61
</div>
<div id="sys62" class="cell">62
</div>
<div id="sys63" class="cell">63
</div>
<div id="sys64" class="cell">64
</div>
<div id="sys65" class="cell">65
</div>
</div>
<div id="r2" class="row">
<div id="sys54" class="cell">54
</div>
<div id="sys53" class="cell">53
</div>
<div id="sys52" class="cell">52
</div>
<div id="sys51" class="cell">51
</div>
<div id="sys50" class="cell">50
</div>
<div id="sys49" class="cell">49
</div>
<div id="sys48" class="cell">48
</div>
<div id="sys47" class="cell">47
</div>
<div id="sys46" class="cell">46
</div>
<div id="sys45" class="cell">45
</div>
<div id="sys44" class="cell">44
</div>
</div>
<div id="r3" class="row">
<div id="sys43" class="cell">43
</div>
<div id="sys42" class="cell">42
</div>
<div id="sys41" class="cell">41
</div>
<div id="sys40" class="cell">40
</div>
<div id="sys39" class="cell">39
</div>
<div id="sys38" class="cell">38
</div>
<div id="sys37" class="cell">37
</div>
<div id="sys36" class="cell">36
</div>
<div id="sys35" class="cell">35
</div>
<div id="sys34" class="cell">34
</div>
<div id="sys33" class="cell">33
</div>
</div>
<div id="r4" class="row">
<div id="sys32" class="cell">32
</div>
<div id="sys31" class="cell">31
</div>
<div id="sys30" class="cell">30
</div>
<div id="sys29" class="cell">29
</div>
<div id="sys28" class="cell">28
</div>
<div id="sys27" class="cell">27
</div>
<div id="sys26" class="cell">26
</div>
<div id="sys25" class="cell">25
</div>
<div id="sys24" class="cell">24
</div>
<div id="sys23" class="cell">23
</div>
<div id="sys22" class="cell">22
</div>
</div>
<div id="r5" class="row">
<div id="sys11" class="cell">11
</div>
<div id="sys12" class="cell">12
</div>
<div id="sys13" class="cell">13
</div>
<div id="sys14" class="cell">14
</div>
<div id="sys15" class="cell">15
</div>
<div id="sys16" class="cell">16
</div>
<div id="sys17" class="cell">17
</div>
<div id="sys18" class="cell">18
</div>
<div id="sys19" class="cell">19
</div>
<div id="sys20" class="cell">20
</div>
<div id="sys21" class="cell">21
</div>
</div>
<div id="r6" class="row">
<div id="sys10" class="cell">10
</div>
<div id="sys09" class="cell">09
</div>
<div id="sys08" class="cell">08
</div>
<div id="sys07" class="cell">07
</div>
<div id="sys06" class="cell">06
</div>
<div id="sys05" class="cell">05
</div>
<div id="sys04" class="cell">04
</div>
<div id="sys03" class="cell">03
</div>
<div id="sys02" class="cell">02
</div>
<div id="sys01" class="cell">01
</div>
</div>
</div>
</body>
</html>
My Current output is as follows:
我的当前输出如下：
I need to fill a 'red' color or a 'green' color inside the white space you can see. Suggest me the best possible options using CSS to do so.
我需要在您可以看到的白色空间内填充“红色”或“绿色”。建议我使用 CSS 的最佳选择。
回答by darthmaim
Use background-color: <color>. (https://developer.mozilla.org/en-US/docs/Web/CSS/background-color)
使用background-color: <color>. ( https://developer.mozilla.org/en-US/docs/Web/CSS/background-color)
回答by JunM
Add - background-color: green;
添加 - background-color: green;
div.cell{
display: table-cell;
border-style: solid;
border-width:15px;
padding-left: 30px;
padding-right: 30px;
padding-top: 30px;
padding-bottom: 30px;
font-weight:5000;
font-size:200%;
background-color: green;
}
回答by abinaya
You can use this
你可以用这个
.row .cell{
background-color:red; // Use red or green as per your requirement
}
