问题描述
我有一个以图片为背景的< div>
。我拥有它,以便每当有人将鼠标悬停在< div>
上时,背景图片将变为其他图片。问题是,当鼠标悬停在< div>
上时,第一次当背景图像加载时闪烁,几毫秒内就看不到图像。
我如何消除这种闪烁?如何在用户实际悬停在< div>
之前加载用于悬停的图片,以便立即生效。
更改< div>
背景的代码非常简单:
#someID {
background-image:* image source *;
}
#someID:hover {
background-image:*另一个图像源*
}
我知道有一个解决方案,将两个所需图像放在一个图像中,然后播放背景位置,但这不是一个选项,因为我总是将背景图像设置为像这样:
image-size:100%100%;
在window.load()函数中, p>
-
确保所有图像都加载到页面上。
FYI - 您可能想要设置每个图像CSS位置为绝对位置,Top:0px和Left:0px,都位于父div中,位置为relative,具有一定的宽度和高度。 使用jquery的或点击
图片。在您选择的方法函数中,fadeOut()当前的图像和
fadeIn()图像有一个显示:没有与之相关联的图像。
I have a <div>
with an image as a background. I have it so that whenever someone hovers over the <div>
, the background image changes to some other image. The problem is, the first time when your mouse hovers over the <div>
, the background image flickers as it loads and you see no image for few milliseconds.
How do I remove this flicker? How do I load the image for the hover before the user actually hovers over the <div>
so the effect is immediate.
My code for changing the <div>
background is very simple:
#someID{
background-image: *image source*;
}
#someID:hover{
background-image: *Another image source*
}
I know that there is a solution with putting the two desired images in one image and then play with the background position, but that's not an option here because I always set the background image to be like this:
image-size: 100% 100%;
Within a window.load() function,
make sure all the images are loaded onto the page.
FYI - You probably want to set each image's CSS position to absolute, with a Top:0px and Left:0px, all within a parent div that has a position:relative, with a certain width and height.set display:none to the ones that should'nt be shown as DC_ pointed out
use jquery's hover method or click method to click on theimage. Within the method function you choose, fadeOut() the current imag andfadeIn() the image that has a display:none associated to it.
这篇关于如何删除背景图片更改闪烁的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!