css tooltip一直显示图片

CSS tooltip是一种鼠标悬浮时显示一段提示文字的效果，可以帮助提高网站的用户体验。不过，如果想要在tooltip中显示图片，则需要对CSS进行相应的修改。

首先，我们需要创建一个带有背景图片的tooltip容器：

.tooltip {
  position: relative;
  display: inline-block;
}

.tooltip:before {
  content: "";
  display: none;
  position: absolute;
  z-index: 1;
  top: 100%;
  left: 50%;
  margin-left: -10px;
  width: 20px;
  height: 20px;
  background-image: url('path/to/image.png');
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
}

.tooltip:hover:before {
  display: block;
}

在这个代码中，我们创建了一个名为.tooltip的容器，并为之添加了一个伪元素.tooltip:before。在.tooltip:before中，我们指定了一个背景图片作为tooltip的图标，并设置了该图标的位置和大小。此外，我们还对.tooltip:before设置了pointer-events:none，这意味着当鼠标悬浮在该图标上方时，它将不会遮挡tooltip中的文本内容。

接下来，在.tooltip:hover:before中，我们指定了当鼠标悬浮在.tooltip容器上方时，.tooltip:before将会显示出来。

最后，我们可以将.tooltip容器中的文本内容设置为隐藏状态，并将其在.tooltip:hover:before中显示出来：

.tooltip {
  position: relative;
  display: inline-block;
}

.tooltip:before {
  content: "";
  display: none;
  position: absolute;
  z-index: 1;
  top: 100%;
  left: 50%;
  margin-left: -10px;
  width: 20px;
  height: 20px;
  background-image: url('path/to/image.png');
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
}

.tooltip:hover:before {
  display: block;
}

.tooltip span {
  display: none;
  position: absolute;
  left: 50%;
  top: -50px;
  padding: 10px;
  background: #333;
  color: #fff;
  z-index: 2;
  transform: translateX(-50%);
}

.tooltip:hover span {
  display: block;
}

在这个代码中，我们在.tooltip容器中添加了一个隐藏的span元素，并将其在.tooltip:hover:before状态下显示出来。我们还指定了span元素的位置和样式，并将其设置为了z-index:2，这意味着在tooltip中文字内容位于图标的上方。

通过这些CSS代码的配置，我们可以创建一个带有图标的tooltip，并在其中显示图片。