拉伸悬停背景为全高

我试图适应使用一些的JScript，使文本链接改变单一的网页上的全出血的背景，我砍死的尝试是在这里：拉伸悬停背景为全高

http://testarama.webege.com/

我的问题是屏幕较小......如果您调整窗口大小，那么您会注意到悬停背景仅在向下滚动之前填充了初始窗口大小的区域......但是如果完全向下滚动并使用底部链接那么这会显示原始背景的截断点（测试会比我更好地解释！）。

我试过各种容器和背景附加规则，似乎无法解决这个问题......我真的很想使用这个技巧的网站，所以如果任何人都可以阐明它在哪里出错了，那会很棒。

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

来源

2015-04-22 the_t_test_1

背景被设定在闪光元素上。

这是从身体的后裔。所以它的尺寸是全身的尺寸。

但body高度的尺寸为100％，所以它根据html尺寸标注尺寸，最后是浏览器窗口的尺寸。

但是，当您滚动时，屏幕底部位于界限元素，其大小根据其内容而定，并且在小浏览器大小中，其高度大于body。

，你可以试着让身体适应约束，但可能是最好的解决方案是让闪光灯后裔约束

还没有完全成功，这是我已经得到了最好的：

fiddle

.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'); 
}

来源

2015-04-22 20:16:27 vals

这听起来像一个伟大的建议，我明白了为什么它会工作，但我不知道如何实现它...你的意思是通过重新命令div或通过改变fig.appendTo（'body'）;到fig.appendTo（'bound'）; ...因为这是行不通的：/ –

我真的不能告诉你，很难说在现场。请提供一个工作演示，以便我们能够更好地帮助您。 – vals

上面的代码与http://testarama.webege.com上的演示链接完全相同......您是否可以提供一项服务建议，以便我可以制作演示文稿？我不确定你的意思。 –

拉伸悬停背景为全高

回答

相关问题