html - 在 CSS 网格布局中更改颜色的背景颜色
问题描述
我需要一些帮助来更改显示中列的背景颜色:网格我尝试在 .calendar 中使用背景图像,但结果不好如何更改特定列中的背景颜色?
我将带有 SCSS 的代码放在 codepen https://codepen.io/henrique-abdala/pen/JQpyeZ
我需要像这个 例子这样的东西
.calendar {
width: 100%;
}
.calendar .line {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-auto-flow: dense;
grid-gap: 2px 10px;
}
.calendar .space {
display: contents;
background-color: #ddd;
/* if display contents, this won't color */
}
.calendar .week-day, .calendar .day-label, .calendar .event {
padding: 4px 10px;
}
.calendar .event {
background-color: #ccc;
}
.calendar .event-end {
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
.calendar .event-start {
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
.calendar [data-span-start="1"] {
grid-column-start: 1;
}
.calendar [data-span-start="2"] {
grid-column-start: 2;
}
.calendar [data-span-start="3"] {
grid-column-start: 3;
}
.calendar [data-span-start="4"] {
grid-column-start: 4;
}
.calendar [data-span-start="5"] {
grid-column-start: 5;
}
.calendar [data-span-start="6"] {
grid-column-start: 6;
}
.calendar [data-span-end="1"] {
grid-column-end: span 1;
}
.calendar [data-span-end="2"] {
grid-column-end: span 2;
}
.calendar [data-span-end="3"] {
grid-column-end: span 3;
}
.calendar [data-span-end="4"] {
grid-column-end: span 4;
}
.calendar [data-span-end="5"] {
grid-column-end: span 5;
}
.calendar [data-span-end="6"] {
grid-column-end: span 6;
}
<div class="calendar">
<div class="line">
<div class="line-day">10H</div>
<div class="line-day">11H10</div>
<div class="line-day">15H</div>
<div class="line-day">16H10</div>
<div class="line-day">19H30</div>
<div class="line-day">20H40</div>
</div>
<div class="line">
<div class="space">
<h3 data-span-start="1" data-span-end="6">Sala 01</h3>
</div>
</div>
<div class="line">
<div class="space">
<div class="event event-start event-end" data-span-start="1" data-span-end="1">Moda</div>
</div>
<div class="space">
<div class="event event-start event-end" data-span-start="2" data-span-end="1">Design</div>
</div>
<div class="space">
<div class="event event-start event-end" data-span-start="3" data-span-end="1">Design</div>
</div>
<div class="space">
<div class="event event-start event-end" data-span-start="4" data-span-end="1">Escultura</div>
</div>
<div class="space">
<div class="event event-start event-end" data-span-start="5" data-span-end="1">Design</div>
</div>
<div class="space">
<div class="event event-start event-end" data-span-start="6" data-span-end="1">Fotografia</div>
</div>
</div>
<div class="line">
<div class="space">
<h3 data-span-start="1" data-span-end="6">Sala 02</h3>
</div>
</div>
<div class="line">
<div class="space">
<div class="event event-start event-end" data-span-start="1" data-span-end="2">Moda</div>
</div>
<div class="space">
<div class="event event-start event-end" data-span-start="5" data-span-end="1">Design</div>
</div>
<div class="space">
<div class="event event-start event-end" data-span-start="6" data-span-end="1">Fotografia</div>
</div>
</div>
<div class="line">
<div class="space">
<h3 data-span-start="1" data-span-end="6">Sala 03</h3>
</div>
</div>
<div class="line">
<div class="space">
<div class="event event-start event-end" data-span-start="2" data-span-end="2">Moda</div>
</div>
<div class="space">
<div class="event event-start event-end" data-span-start="4" data-span-end="1">Design</div>
</div>
</div>
</div>
解决方案
推荐阅读
- ios - 在 iOS 中使用 CloudKit 查询一系列数据
- hive - 计算蜂巢中两天之间的天数差异
- google-chrome - 2020 年 8 月 10 日更新后,Chrome 未在 iframe 中发回 cookie
- c - 如何使 getdents() 在目录中表现得像 read() [K&R 第 8.6 节]
- keras - 虽然训练图像分割网络 UNET-验证损失在一些时期后没有减少,但保持不变
- numpy - genfromtxt() 将结果保存到单独的文件
- redux - 使用 redux-toolkit 处理错误
- java - 禁用日期的不同颜色 CalendarView
- javascript - 将非 ZIP 文件提取到磁盘上的文件中?
- python - 无法将变量(输入)写入文本文件