html - 重复背景图案的悬停效果

标签 html css

我有一个设置了 background-repeat 属性的图案图像,因此该图像在 div 中的 X 轴和 Y 轴上重复。

现在我想在用户越过 div 时更改背景图像。

使用全尺寸背景会很简单,因为我会将其转换为 sprite,然后使用 css 和 :hover 移动背景。

但是如果图像是重复的X和Y,是不是就无法创建 Sprite 了;正确的? 或者有什么技巧可以做到这一点? 因为通过 css 直接更改图像很难看,因为需要加载悬停图像,并且用户在 div 中看不到任何背景大约 1-2 秒。

谢谢!

最佳答案

只是preload image 或者 使用具有两个不同背景的两个嵌套元素。 鼠标悬停时 - 为嵌套元素制作透明背景。

关于html - 重复背景图案的悬停效果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34219676/

相关文章:

html - 电子邮件模板中的边框半径替代方案

javascript - 当存在另一个 div 时如何隐藏一个 div?

Jquery - 使用父高度的垂直居中。有点

javascript - 带基础的样式文件输入

javascript - 运行 fancybox-thumb 时隐藏其他图像

javascript - Chrome 快速内存泄漏。运行 Javascript Profiler 修复泄漏时如何调试?

javascript - 输入字符应该在 html 中打印一个新行

javascript - 关闭弹出窗口时暂停当前视频

javascript - 如何使用 HTML 表格显示存储在数组中的用户输入数据

css - 旋转回纵向时,视口(viewport)缩放会中断