css图片可以关闭 |搜索框 css 模板

.close-icon {
position: absolute;
top: 5px;
right: 5px;
width: 20px;
height: 20px;
background-image: url("path/to/image.png");
background-size: cover;
cursor: pointer;
}
.image-container {
position: relative;
}
.image-container:hover .close-icon {
display: block;
}
.close-icon:hover {
background-image: url("path/to/hover-image.png");
}
.close-icon:active {
background-image: url("path/to/active-image.png");
}
.close-icon:focus {
outline: none;
}
.close-icon::before,
.close-icon::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 2px;
height: 14px;
background-color: #fff;
}
.close-icon::before {
transform: translate(-50%, -50%) rotate(45deg);
}
.close-icon::after {
transform: translate(-50%, -50%) rotate(-45deg);
}

以上代码中，大家使用背景图片作为关闭按钮。在图片容器内添加一个绝对定位的关闭按钮，并设置它的位置和大小。当鼠标悬停在图片容器上时，通过 CSS :hover 伪类，将关闭按钮显示出来。

同时，大家还通过 :before 和 :after 伪元素来创建一个 X 形状的图标。其中，:before 元素将被旋转 45 度，:after 元素将被旋转 -45 度。这样就制作完成了一个简单的关闭按钮。

当用户点击关闭按钮时，大家还可以通过 :active 伪类更换按钮图片来给用户一种点击按钮的反馈。同样，大家在代码中加入了 :focus 样式，避免用户通过 tab 键也可以聚焦到关闭按钮上，从而增加了可访问性。

在实际应用中，大家也可以根据需求自定义关闭按钮样式和功能。无论在哪种情况下，获得的结果都是用户友好的。