html - 约束叠加到图像高度？

Question

我很难将透明叠加层和文本限制在背景图像的高度。我尝试使用媒体查询来检测纵向/横向模式，但当要显示大量文本时效果不佳。

如何将透明叠加层和文本的高度限制为原生图像的高度(即使调整大小)，同时仍然允许叠加层和文本在图像高度内滚动？

这是我尝试使用媒体查询来检测方向的尝试。它运行良好，除非有大量文本: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;
                }
            }

Answer 1

你应该使用 overflow(-x/-y) 滚动 :)

发展