防止背景图像在更改时闪烁 [英] Prevent background image flashing on change

问题描述

我正在使用背景图像作为按钮，并在:hover上切换到其他图像.

I'm using background image for a button and switch to a different one on :hover.

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

When the switch happens on the first mouse over it briefly flashes the background color. (I set it to orange here so it's more noticeable, it does the same with white background, or if I leave the background color unset). However, it does not flash on subsequent mouseovers.

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

How can I prevent the first flash of the background color that happens on page load, and first mouseover?

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

.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')
}

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

推荐答案

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

Load both images using multiple background and make the first one on the top then adjust background-size to show the other on hover. In this case, both images will be loaded initially and the second one will be ready on hover:

.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>

这篇关于防止背景图像在更改时闪烁的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！