仅在CSS中将image -height-div与%-width叠加在图像上

在CSS中，可以使用position属性和百分比值来实现将image-height-div与%-width叠加在图像上。

首先，确保图像的父元素具有相对定位的position属性，这样可以使得子元素相对于父元素进行定位。然后，使用绝对定位的position属性来定位image-height-div元素。

下面是一个示例代码：

HTML代码：

<div class="image-container">
  <img src="image.jpg" alt="Image">
  <div class="overlay">image-height-div</div>
</div>

CSS代码：

.image-container {
  position: relative;
  display: inline-block;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 50%;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  text-align: center;
  padding-top: 20px;
}

在上述代码中，.image-container类设置了相对定位，使得其成为子元素的参考点。.overlay类使用绝对定位，通过设置top、left、width和height属性来控制其在图像上的位置和大小。可以根据需要调整这些属性的值。

这样，.overlay元素就会叠加在图像上，并且可以根据需要进行样式调整。例如，可以设置背景颜色、文本样式等。

推荐的腾讯云相关产品：腾讯云对象存储（COS） 腾讯云对象存储（COS）是一种高可用、高可靠、强安全的云端存储服务，适用于存储和处理各类非结构化数据，如图片、音视频、文档等。您可以将图像文件上传到腾讯云对象存储，并通过腾讯云提供的API进行管理和访问。

了解更多关于腾讯云对象存储（COS）的信息，请访问：腾讯云对象存储（COS）产品介绍