将鼠标悬停在图像上会使该图像成为全屏背景
Posted
技术标签:
【中文标题】将鼠标悬停在图像上会使该图像成为全屏背景【英文标题】：Hovering over an image makes that image the full-screen background 【发布时间】：2014-07-28 14:08:32 【问题描述】：所以在我的博客上，我想要一个标准背景（等黑色），然后当我将鼠标悬停在我博客上显示的随机图像上时，该图像就会变成全屏背景。
我使用的是以下内容：
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;
虽然什么都没有发生..
【问题讨论】：
有没有想过添加#changer:hover ？ 【参考方案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 会最方便
【讨论】：
【参考方案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');
不确定您是否会喜欢它，但它可以解决您的问题。
【讨论】：
破折号，如果只有一张图片，可以不使用 JQuery：jsfiddle.net/yrKRX/203（也可以在不使用 JQuery 的情况下处理更多图片，但您必须为每个图片编写单独的 id） 我承认，您的解决方案确实看起来更优雅。 :)【参考方案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>
【讨论】：
以上是关于将鼠标悬停在图像上会使该图像成为全屏背景的主要内容，如果未能解决你的问题，请参考以下文章