CSS捉迷藏文案有趣图片 |csstring分割字符串

在这张图片中，大家可以看到一只猫猫和一只鱼鱼。但是，当你把鼠标移到图片上时，猫猫和鱼鱼就会消失不见！这是怎么做到的呢？

看代码：

.container {
position: relative;
}
img {
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
img:hover {
opacity: 0;
}

大家给图片的父级元素（class为.container）设置了相对定位，这样图片就可以基于它的位置进行定位。然后，大家使用绝对定位将图片放到容器的左上角，并为它设置了z-index属性为1，确保它在整个布局中始终处于顶部。

接下来，大家使用:hover伪类为图片设置了一个透明度为0的动画效果。当鼠标移到图片上时，它就会变得透明，从而实现了捉迷藏的效果。

如果你想要尝试这个技巧，可以在你的项目中使用。你可以用它来创建一个令人惊叹的交互式元素，也可以用它来给你的网站添加一个有趣的细节。