<div class="hour
-row" v
-for="(hour, hIndex) in hourValues" :key="hIndex">
<div class="time
-cell time
-cell
-bg" v
-for="(day, dIndex) in weekDays" :key="dIndex"
:style="getCellStyle(dIndex, hIndex, itemBgHeight, item
Position)"
:class="{ selected: isSelected(dIndex, hIndex) }" :data
-day="dIndex" :data
-hour="hIndex"
:data
-minute="0">
{{ hIndex }}
</div>
</div>
<button @click="getHeight">点击</button>
getCellStyle(day, hour, itemBgHeight, item
Position) {
const cell = this.cellStates[`${day},${hour}`];
// return cell ? {
backgroundColor: cell.color};
this.itemBgHeight = itemBgHeight;
this.item
Position = item
Position;
if (cell) {
console.log('cell', cell);
}
return cell ? { '
--bg
-height': this.itemBgHeight, '
--position': this.item
Position } : {};
},
getHeight() {
const day = 0;
const startTimeH = 2;
const itemBgHeight = 60;
this.getCellStyle(day, startTimeH, `${itemBgHeight}%`, 'bottom');
},
//cell背景渐变色
.time
-cell
-bg {
/* 基础样式 */
// width: 300px;
// height: 200px;
// border: 1px solid #ccc;
/* 背景渐变实现 */
background-image: linear
-gradient(var(
--gradient
-direction, to bottom),
$blueColor,
$blueColor var(
--bg
-height, 0%),
transparent var(
--bg
-height, 0%),
transparent);
/* 根据位置调整渐变方向 */
background-position: var(
--bg
-position);
background-repeat: no
-repeat;
}
/* 动态调整位置 */
.time
-cell
-bg[style*="top"] {
--gradient
-direction: to bottom;
--bg
-position: top;
}
.time
-cell
-bg[style*="bottom"] {
--gradient
-direction: to top;
--bg
-position: bottom;
} 上面方法点击按钮，改变数组里某个div的背景颜色高度，其他的背景颜色高度保持不变
本文介绍了CSS中如何正确设置背景图片的位置，并给出了JavaScript中实现背景位置动态调整的正确方式。需要注意的是，在使用JS设置背景位置时，确保单位后添加空格。
扫一扫
12万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
