拉伸懸停背景爲全高

我試圖適應使用一些的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上的演示鏈接完全相同......您是否可以提供一項服務建議，以便我可以製作演示文稿？我不確定你的意思。 –

拉伸懸停背景爲全高

回答

相關問題