約束疊加到圖像高度？

我很難將透明覆蓋&文本約束到背景圖像的高度。我嘗試使用媒體查詢來檢測縱向/橫向模式，但在顯示大量文本時效果不佳。約束疊加到圖像高度？

如何將文本的透明覆蓋層高度限制爲原始圖像的高度（即使調整大小），同時仍允許覆蓋文本在圖像高度內滾動？

這是我的媒體查詢嘗試檢測方向的嘗試。它運作良好，除了當有大量的文字：http://jsfiddle.net/9ky7xfmd/1/

body { 
    background-image: url("http://www.gracotechgrupa.hr/img/site/header_homes/icon/zastita-metalnih-dijelova.jpg"); 
    background-color: black; 
    width: 100%; 
    height: auto; 
    display: block; 
    background-repeat:no-repeat; 
    overflow-y: auto; 
    overflow-x: hidden; 
} 

@media all and (orientation:portrait) { 
       /* Styles for Portrait screen */ 
       .headline { 
        display: block; 
        color: blue; 
        -webkit-box-shadow: inset 0px 0px 300px 28px rgba(255,255,255,0.77); 
        -moz-box-shadow: inset 0px 0px 300px 28px rgba(255,255,255,0.77); 
        box-shadow: inset 0px 0px 300px 28px rgba(255,255,255,0.77); 
        background: rgba(255,255,255,0.73); 
        padding-top: 0.7%; 
        padding-bottom: 1%; 
        padding-left: 3%; 
        padding-right: 3%; 
        height: 20%; 
        position: absolute; 
        margin-left: 25%; 
        margin-right: 25%; 
        top: 12.5%; 
        max-width: 45%; 
        font-size: 36px; /* Some tweener fallback that doesn't look awful */ 
        font-size: 2.25vmin; /* This was originally 1.33vw & 1.718vmin */ 
        opacity:1; 
        z-index: 2; 
       } 
      } 
      @media all and (orientation:landscape) { 
       /* Styles for Landscape screen */ 
       .headline { 
        display: block; 
        color: blue; 
        -webkit-box-shadow: inset 0px 0px 300px 28px rgba(255,255,255,0.77); 
        -moz-box-shadow: inset 0px 0px 300px 28px rgba(255,255,255,0.77); 
        box-shadow: inset 0px 0px 300px 28px rgba(255,255,255,0.77); 
        background: rgba(255,255,255,0.73); 
        padding-top: 0.7%; 
        padding-bottom: 1%; 
        padding-left: 3%; 
        padding-right: 3%; 
        height: auto; 
        position: absolute; 
        margin-left: 25%; 
        margin-right: 25%; 
        top: 12.5%; 
        max-width: 45%; 
        font-size: 36px; /* Some tweener fallback that doesn't look awful */ 
        font-size: 2.25vmin; /* This was originally 1.33vw & 1.718vmin */ 
        opacity:1; 
        z-index: 2; 
       } 
      }

來源

2015-10-16 Fr33

*的原因，我想要做到這一點是因爲移動設備將風景圖像調整爲屏幕大小的一半左右。我試圖強制所有方向的景觀視圖。 – Fr33

您應該使用溢出（-x/-y）滾動:)

Devlen

來源

2015-10-16 18:05:00

對不起，遲到的回覆，我一直在嘗試測試出來。它很棒！但它會導致滾動條在疊加層中顯示，看起來很奇怪。謝謝回覆！我現在要弄清楚如何處理滾動條大聲笑... – Fr33

Sry爲已故的awnser ^^但你可以風格的滾動ui！ http://stackoverflow.com/questions/9251354/css-customized-scroll-bar-in-div這是一個很好的解釋文章^^ –

約束疊加到圖像高度？

回答

相關問題