div覆盖图片的下一半 让div变成透明模糊的可以看到里面图片的颜色

要实现div覆盖图片的下一半，并让div变为透明模糊的效果，你可以通过CSS混合（CSS blend modes）和伪元素（`:before` 或 `:after`) 来达成。首先，你需要创建一个半透明的模糊背景，然后将其定位在图片下方。这里是一个简单的例子：

HTML结构:

<div class="mask-image">
  <img src="your_image_url" alt="Your Image">
</div>

CSS样式:

.mask-image {
  position: relative;
  overflow: hidden; /* 防止内容溢出 */
}

.mask-image img {
  display: block;
  width: 100%; /* 或者自适应宽度 */
  height: auto;
}

.mask-image:before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50%; /* 覆盖图片的下半部分 */
  background: rgba(0, 0, 0, 0.5); /* 半透明黑色作为模糊效果基础 */
  backdrop-filter: blur(8px); /* 添加模糊效果，数值根据需要调整 */
}

在这个例子中，`.mask-image:before` 伪元素设置了半透明黑色背景并添加了模糊效果，使得div下面的部分变得模糊且能看到图片的颜色。