我正在尝试使用某些jscript来使文本中的链接更改单个网页上的完整出血背景，我的黑客尝试就在这里：
我的问题是屏幕较小...如果您调整窗口大小，那么您会注意到，在向下滚动之前，悬停背景仅填充初始窗口大小的区域...但是如果您完全向下滚动并使用然后底部链接显示原始背景的截止值（测试将解释比我好！）。
我尝试了各种容器和背景附加规则，似乎无法解决这个问题......我真的很想将这个技巧用于网站，所以如果有人能够了解它的发展方向错了，这太棒了。
INDEX.HTM =
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Tester</title>
<meta name="viewport" content="width=device-width, initial-scale=0.5, maximum-scale=1">
<link rel="stylesheet" href="style.css">
<script src="http://code.jquery.com/jquery-2.0.0.min.js"></script>
<script src='leaflet.js' type='text/javascript'></script>
<script src='wax.leaf.js' type='text/javascript'></script>
<link href='leaflet.css' rel='stylesheet' type='text/css' />
<script>
$( document ).ready(function() {
$('p a').each(function() {
var fig = $('<flashers class="'+ $(this).attr('rel') +'"></flashers>');
fig.appendTo('body');
});
$('p a').hover(
function() {
$('body').addClass('hover_on');
$(this).addClass('active');
$('.'+$(this).attr('rel')).addClass('on');
},
function() {
$('body').removeClass('hover_on');
$(this).removeClass('active');
$('.'+$(this).attr('rel')).removeClass('on');
}
);
});
</script>
</head>
<body>
<bound>
<div class="main_box">
<p>This is a background link <a rel="green">that turns green</a>.</p>
<p>This is more text. Lorem ipsum dolor sit amet and so forth and so on and keep going.</p>
<p>This is more text. Lorem ipsum dolor sit amet and so forth and so on and keep going. Lorem ipsum dolor sit amet and so forth and so on and keep going. Lorem ipsum dolor sit amet and so forth and so on and keep going.</p>
<p>This is more text. Lorem ipsum dolor sit amet and so forth and so on and keep going. Lorem ipsum dolor sit amet and so forth and so on and keep going. Lorem ipsum dolor sit amet and so forth and so on and keep going. Lorem ipsum dolor sit amet and so forth and so on and keep going.</p>
<p>This is more text. Lorem ipsum dolor sit amet and so forth and so on and keep going. Lorem ipsum dolor sit amet and so forth and so on and keep going. Lorem ipsum dolor sit amet and so forth and so on and keep going. Lorem ipsum dolor sit amet and so forth and so on and keep going. Lorem ipsum dolor sit amet and so forth and so on and keep going. Lorem ipsum dolor sit amet and so forth and so on and keep going.</p>
<p>This is more text. Lorem ipsum dolor sit amet and so forth and so on and keep going.</p>
<p>This is another background link <a rel="green">that turns green</a>.</p>
<footer />
</div>
</bound>
</body>
</html>
的style.css：
/*** background tester ***/
* {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
html, body {
height: 100%;
}
/* Main */
body {
text-align: center;
color: white;
font-family: Georgia, Garamond, Baskerville, serif;
font-size: 12pt;
font-weight: 400;
line-height: 1.5em;
margin: 0 30px;
background: url('red.jpg') center center #222;
background-size: cover;
background-attachment: fixed;
-webkit-font-smoothing: antialiased;
}
flashers {
position: absolute;
left: 0; top: 0; right: 0; bottom: 0;
display: block;
background-position: center center;
background-size: cover;
background-attachment: fixed;
opacity: 0;
transition: 1s opacity;
-webkit-transition: 1s opacity;
}
::selection { background: rgba(255,255,255,0.7); }
/* Backgrounds */
@media only screen and (min-width: 640px) {
flashers.on { opacity: 1; }
flashers.green { background-image: url('green.jpg'); }
}
/* Content etc. */
bound {
width: 100%;
height: 100%;
max-width: 620px;
margin: 0 auto;
box-sizing: border-box;
-moz-box-sizing: border-box;
display: box;
display: -webkit-box;
display: -moz-box;
box-pack: center;
-webkit-box-pack: center;
-moz-box-pack: center;
box-orient: vertical;
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
background: rgba(0,0,0,0.0);
text-align: left;
position: relative;
z-index: 10;
}
/* Big displays etc. */
@media only screen and (min-width: 640px) {
p a {
color: #fff;
margin: 0 3px;
line-height: 0em;
border-bottom: 1px dotted rgba(255,255,255,0.4);
}
p a:not([href]) { pointer-events: auto; }
p a:hover { opacity: 1; }
.hover_on p a[href] { color: transparent; }
.hover_on p a { color: transparent; }
.hover_on p { color: transparent; }
.hover_on p a.active { color: #fff; }
}
/* Other Fixings (some borrowed) */
@media only screen and (max-width: 767px), screen and (max-height: 680px) {
body { font-size: 16pt; }
li { line-height: 1.25em; margin-bottom: 0.6em; }
}
a {
outline: medium none !important;
}
在链接上可以看到休息：http://testarama.webege.com/
以及fiddle
答案 0 :(得分：0)
背景设置在闪光灯元素上。
这是身体的后代。所以它的大小是身体的整个维度。
但正文高度的尺寸标注为100％，因此根据html尺寸标注尺寸，最后是浏览器窗口的尺寸。
但是当您滚动时，屏幕的底部位于绑定元素上，该元素根据其内容调整大小，并且在小浏览器尺寸中，其高度大于正文。
你可以尝试让 body 适应绑定，但最好的解决办法是让闪烁后续绑定< /强>
Haven没有完全成功，这是我所拥有的最好的：
.main_box {
position: relative;
padding-left: 50px;
padding-right: 50px;
z-index: auto;
}
.main_box:after {
content: "";
position: absolute;
left: 0px;
top: 0px;
right: 0px;
height: 110%;
z-index: -9;
opacity: 0;
transition: opacity 1s;
margin-left: -30px;
margin-right: -30px;
background-origin: border-box;
background-size: cover;
background-color: green;
background-clip: border-box;
}
.main_box.active:after {
opacity: 1;
}
.green:after {
background-image: url('http://s8.postimg.org/xj53t3d91/green.jpg');
}