Question

因此，在我的博客上，我想要一个标准的背景（等黑色），然后当我将鼠标悬停在我博客上显示的随机图像上时，该图像将成为全屏背景。

我使用的是以下内容：

{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; }

虽然没有任何反应......

Answer 1

你需要这样的东西吗？

#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; 



 }

<强> DEMO

对于多个图像，使用JS / Jquery

最方便

Answer 2

this你需要什么？

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

它需要JS和Jquery，但jquery部分可以转换为纯JS。 AS非常简单：

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

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

不确定您是否喜欢它，但它可以解决您的问题。

Answer 3

你必须写：

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

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

3 个答案: