css鼠标悬停图片显示二维码

在CSS中，你可以通过一些组合技术来实现在鼠标悬停时图片显示二维码的效果。这里有一个基本步骤：

1. 首先，你需要有一张普通图片作为背景，并将其设置为`display: none;`，这样它默认不会显示。

.image-container {
   position: relative;
}
.background-image {
   display: none;
   width: 100%; /* 或者实际宽度 */
   height: auto;
}

2. 然后，添加一张透明度较低的二维码图片作为hover效果的触发元素。这可以是一个伪元素(`::after`)，位置设在其父元素内部：

.image-container::after {
   content: '';
   background-image: url('your_qrcode_image.png');
   background-size: contain;
   opacity: 0.5;
   display: block;
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: -1; /* 将其置于底层以便于覆盖 */
   transition: opacity 0.3s ease;
}

.image-container:hover::after {
   opacity: 1; /* 当鼠标悬停时，增加透明度使其可见 */
}

3. 当用户将鼠标悬停在`.image-container`上时，背景图片会因为`:hover`伪类而显示二维码图片。

请注意，这只是一个基础示例，实际应用可能需要配合JavaScript或者其他库来动态生成或替换二维码内容，如果需要实时生成二维码的话。