Html 将鼠标悬停在图像上会使该图像成为全屏背景_Html_Css_Background_Hover_Effect

Html 将鼠标悬停在图像上会使该图像成为全屏背景

html css

Html 将鼠标悬停在图像上会使该图像成为全屏背景,html,css,background,hover,effect,Html,Css,Background,Hover,Effect,所以在我的博客上，我希望有一个标准的背景（黑色等），然后当我在我的博客上显示的随机图像上悬停，然后该图像成为全屏背景我使用的是以下内容： {block:ifphotoeffect}<div id="changer"></div>{/block:ifphotoeffect} #changer { top: 0px; left: 0px; height: 100%; width: 100%; background: url(http://static.tumblr

所以在我的博客上，我希望有一个标准的背景（黑色等），然后当我在我的博客上显示的随机图像上悬停，然后该图像成为全屏背景

我使用的是以下内容：

{block:ifphotoeffect}<div id="changer"></div>{/block:ifphotoeffect}

#changer  { top: 0px; 
left: 0px;
height: 100%; 
width: 100%; 
background: url(http://static.tumblr.com/mqkrxog/PPan52qgn/transparent.png)top left fixed repeat; 
background-size: cover; 
position: fixed;
z-index: -9999999999; 
opacity: 1; 
-webkit-transition:all 0.6s;
-moz-transition:all 0.6s; 
-ms-transition:all 0.6s; 
-o-transition:all 0.6s;  
transition:all 0.6s; }

{block:ifphotoeffect}{/block:ifphotoeffect}
#变换器{top:0px；
左：0px；
身高：100%；
宽度：100%；
背景：url(http://static.tumblr.com/mqkrxog/PPan52qgn/transparent.png)左上固定重复；
背景尺寸：封面；
位置：固定；
z指数：-9999999；
不透明度：1；
-webkit转换：所有0.6s；
-moz转换：全部0.6s；
-ms转换：均为0.6s；
-o-过渡：均为0.6s；
转换：所有0.6s；}

虽然什么也没发生

你需要这样的东西吗

#changer {
width: 300px;
height: 300px;
background: url(http://www.pooltile.com.au/Light%20Grey%20Granite/Pictures/Thumb/LtGreyTile.jpg);
  -webkit-transition: background 1s ease-out;
  -moz-transition: background 1s ease-out;
  -o-transition: background 1s ease-out;
  transition: background 1s ease-out; 


}


#changer:hover   { top: 0px; 
left: 0px;
height: 100%; 
width: 100%; 
background: url(http://www.pooltile.com.au/Light%20Grey%20Granite/Pictures/Thumb/LtGreyTile.jpg) left fixed repeat; 
background-size: cover; 
position: fixed;
z-index: -9999999999; 



 }

对于多个图像，使用JS/Jquery是最方便的

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>



#changer  {
top:0px; 
left:0px;
height:40%; 
width:40%; 
background-image:url(1.jpg);
background-position:left top fixed;
background-size: cover; 
position: fixed;
z-index: -9999999999; 
opacity: 1; 
-webkit-transition:all 0.6s;
-moz-transition:all 0.6s; 
-ms-transition:all 0.6s; 
-o-transition:all 0.6s;  
transition:all 0.6s; }   


#changer:hover   { 
top: 0px; 
left: 0px;
height: 100%; 
width: 100%; 
background-image: url(1.jpg) left fixed repeat; 
background-size: cover; 
position: fixed;
z-index: -9999999999; 



 }
</style>
</head>

<body>

<div id="changer"></div>

</body>
</html>


无标题文件
#变换器{
顶部：0px；
左：0px；
身高：40%；
宽度：40%；
背景图片：url（1.jpg）；
背景位置：左上固定；
背景尺寸：封面；
位置：固定；
z指数：-9999999；
不透明度：1；
-webkit转换：所有0.6s；
-moz转换：全部0.6s；
-ms转换：均为0.6s；
-o-过渡：均为0.6s；
转换：所有0.6s；}
#更改者：悬停{
顶部：0px；
左：0px；
身高：100%；
宽度：100%；
背景图片：url（1.jpg）左固定重复；
背景尺寸：封面；
位置：固定；
z指数：-9999999；
}

是您需要的吗

我使用了Hristo Georgiev的答案，并对其进行了修改，从而改变了DOM元素的背景，而不是将当前div移动到所有其他元素下面（我使用了一个div，但您可以对页面主体执行相同的操作）

虽然它需要JS和Jquery，但Jquery部分可以转换为纯JS。事情很简单：

function cb(x){
    $('#yourBodyElement').css({'background-image':($(x).css('background-image'))});
}

function rest(){
    $('#yourBodyElement').css({'background':'blue'});
}

不确定你是否喜欢，但这是解决你问题的办法

有没有想过添加#changer:hover{}？Adash，如果它只有一个图像，那么不需要JQuery也可以做到：（也可以在没有JQuery的情况下使用更多图像，但是您必须为每个图像编写一个单独的id）我承认，您的解决方案确实看起来更优雅。：）