Question

我正在使用背景图片作为按钮，并在dfResult.toJSON.show(false) // +---------------------------------------------------------------------------------------------------------------------+ // |value | // +---------------------------------------------------------------------------------------------------------------------+ // |{"id":123456,"name":"John Citizen","s":{"c1":"a","c2":1},"custom_fields":{"fav_colour":"Blue","star_sign":"Scorpio"}}| // |{"id":990087,"name":"Jane Simth","s":{"c1":"b","c2":2},"custom_fields":{"fav_colour":"Green","star_sign":"Taurus"}} | // +---------------------------------------------------------------------------------------------------------------------+上切换到其他图片。

在第一只鼠标上进行切换时，它会短暂闪烁背景颜色。（我在这里将其设置为橙色，因此更引人注目，它与白色背景相同，或者如果我未设置背景颜色，则相同）。但是，它不会在以后的鼠标悬停时闪烁。

如何防止页面加载时出现背景色的第一次闪烁和鼠标悬停？

https://codepen.io/ClayN/pen/EeeRyP

:hover

.backgroundbutton {
  background-image: url('http://www.BungalowSoftware.com/images/silver-background.jpg');
  width: 100px;
  height: 30px;
  background-color: orange;
}

.backgroundbutton:hover {
  background-image: url('http://www.BungalowSoftware.com/images/silver-background2.jpg')
}

Answer 1

使用多个背景加载两个图像，并在顶部放置第一个图像，然后调整background-size以将另一个图像悬停显示。在这种情况下，两张图片都将首先加载，第二张图片将在悬停时准备就绪：

.backgroundbutton {
  background-image: 
   url('http://www.BungalowSoftware.com/images/silver-background.jpg'),
   url('http://www.BungalowSoftware.com/images/silver-background2.jpg');
  background-size:auto;
  width: 100px;
  height: 30px;
  background-color: orange;
}

.backgroundbutton:hover {
  background-size:0 0,auto;
}

<a class="backgroundbutton">  hover over me</a>

Answer 2

由于将不会预先加载悬停背景图像，因此它会显示闪烁效果，尤其是对于较大的图像尺寸和较长的加载时间。

可以使用CSS精灵轻松修复它，例如将2张背景图片合并为1张，然后将background-position上的:hover更改为new image的高度为400px（200 + 200）。

并且，请勿设置任何background-color来停止页面加载时背景色的初始闪烁。另外，除非将width和height更改为a或display: inline-block等，否则block和.backgroundbutton { background: url("https://i.imgur.com/lrlOvEP.png") 0 0 no-repeat; } .backgroundbutton:hover { background-position: 0 -200px; }都不适用于内联级<a class="backgroundbutton">hover over me</a>。

.backgroundbutton {
  background: linear-gradient(to right, #999, #fff);
}

.backgroundbutton:hover {
  background: linear-gradient(to right, #ccc, #fff);
}

<a class="backgroundbutton">hover over me</a>

此外，您不需要用于渐变背景的任何图像，例如：

{{1}}

{{1}}

防止背景图像在更改时闪烁

2 个答案: