实现背景一半白一半蓝并且颜色占比使用动态css

要实现一半白一半蓝的背景，并且要求使用动态CSS，我们可以使用CSS Gradients来实现这个效果。以下是一个简单的实现方法：

HTML:

<div class="dynamic-background"></div>

CSS:

.dynamic-background {
  width: 100%;
  height: 200px; /* 根据需要调整高度 */
  background: linear-gradient(to right, white 50%, blue 50%);
}

这段CSS代码会创建一个从左到右白色和蓝色交替的线性渐变背景，其中白色占据宽度的50%，蓝色占据宽度的50%。如果你需要动态地调整这个比例（例如根据窗口宽度或其他因素），你可以使用JavaScript来动态更新background属性。

JavaScript (动态调整宽度):

function updateBackground() {
  const div = document.querySelector('.dynamic-background');
  const width = div.offsetWidth; // 获取元素宽度
  const gradient = `linear-gradient(to right, white ${width / 2}px, blue ${width / 2}px)`;
  div.style.background = gradient;
}
 
// 初始化背景
updateBackground();
 
// 如果需要在窗口大小改变时更新背景，可以添加事件监听器
window.addEventListener('resize', updateBackground);

这段JavaScript代码会在页面加载时初始化背景并且在窗口大小改变时更新背景。其中${width / 2}px用于计算每部分应占据的宽度。这样就可以实现背景颜色的动态调整了。