在纯CSS中仅缩放图像的一部分

Question

是否可以这样做，当鼠标悬停在带有pc、ps或vr类的div块上时，图像的一部分会被放大？我试图将原始图像分割为4个部分以分别缩放，但在这种情况下，当更改屏幕分辨率时，整个布局会中断。

图像：

代码：

<link href=“https://cdn.jsdeliver.net/npm网址/[电子邮件保护]/dist/css/bootstrap.min.css“rel=”stylesheet“integrity=”sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1“crossorigin=”anonymous“><样式>.小时-30{高度：30vh；}.h-10小时{高度：10vh；}div公司{溢出：隐藏；}.custom-bg索引{背景图像：url（“http://placekitt.com/3840/2160");背景位置：中心；背景尺寸：封面；背景重复：无重复；转换：不透明度300ms线性，转换300ms线性；不透明度：1；}.pc:悬浮，.ps:悬浮，.vr:悬浮{不透明度：0.9；变换：比例（1.02）；}</style><div class=“container-fluid g-0 h-100 custom-bg-index”><div class=“第g-0 h-100行”><div class=“col-12 h-30 pc border border-primary”><a href=“#”></a></div><div class=“col-12 h-30 ps border-border-warning”><a href=“#”></a></div><div class=“col-12 h-30 vr border border-success”><a href=“#”></a></div><div class=“col-12 h-10社交”><a href=“#”></a></div></div></div>

代码笔

Answer 1

这可能有助于您：

这个<区域>标签定义了图像地图中的一个区域（图像地图是具有可单击区域的图像）。

<区域>元素始终嵌套在<地图>标签。

注意：中的usemap属性<图像>与关联<地图>元素的name属性，并创建图像和映射之间的关系。

示例片段：

<img src=“https://www.w3schools.com/tags/workplace.jpg“alt=”Workplace“usemap=”#workmap“width=”400“height=”379“><map name=“workmap”><area shape=“rect”coords=“34,44270350”alt=“Computer”href=“https://example.com"><area shape=“rect”coords=“290172333250”alt=“电话”href=“https://google.com网站"><area shape=“circle”coords=“337300,44”alt=“咖啡杯”href=“https://stackoverflow.com"></map（地图）>

尝试点击笔记本电脑、手机或杯子。