html - 如何为 div 提供比原始背景更暗的背景？

Question

我正在为我的 php 网站制作日历 View 。 我有一张有 n 行的表。在该表中，奇数行具有浅绿色背景，甚至具有浅粉红色背景。

然后我有一些 div 放在相应的 tr 上，带有 z-index: 8 css 属性。

但我想给他们提供比背景表格行更深的背景。

像粉红色行的 div 应该有深粉色背景，绿色行 div 应该有深绿色背景。

table 和div 都是由jquery 代码自动开发的。

任何人都可以帮助我，我怎样才能做到这一点？

我在 jquery fullcalendar 资源 View 中进行。

我的一些 html 和 css 代码是:

css :

.fc-border-separate tr th{
background: #BFDBFF;
}
.fc-border-separate tr:nth-child(odd) td{
background: #D7FFD7; 
}
.fc-border-separate tr:nth-child(even) td{
background: #FFD5FF;
}
.fc-event {
border-style: solid;
border-width: 0;
font-size: .85em;
cursor: default;
}

 a.fc-event,
 .fc-event-draggable {
cursor: pointer;
}

a.fc-event {
text-decoration: none;
}

.fc-rtl .fc-event {
text-align: right;
}

.fc-event-skin {
border-color: #36c;     /* default BORDER color */
background-color: #36c; /* default BACKGROUND color */
color: #fff;            /* default TEXT color */
}

.fc-event-inner {
position: relative;
width: 100%;
height: 100%;
border-style: solid;
border-width: 0;
overflow: hidden;
}

html:

 <table class="fc-border-separate tblcalendar">
 </table>

 <div class='fc-event fc-event-skin fc-event-inner' style='position: absolute; z-index:8'>
 </div>

Answer 1

Is this what you're looking for?

基本思想是使用伪类:nth-child(odd)和:nth-child(even)，像这样:

tr:nth-child(odd) {
    background-color:lightgreen;
    height:60px;
}

tr:nth-child(even) {
    background-color:pink;
}

tr:nth-child(odd) div {
    background-color:green;
}

tr:nth-child(even) div {
    background-color:red;
}